Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[scope] flyout bug

See original GitHub issue

Bug Report

The modal box can pop up, but the console will report two error

Steps to reproduce

<!-- You MUST include jQuery before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.js"></script>

<body>
<button id="xxx">button</button>
</body>

<script>
  $(document).ready(function(){
    $("#xxx").click(function(event){
      $.flyout({
        autoShow: true,
        title: 'Flyout Notice',
        class: 'wide',
        closeIcon: true,
        content: 'Fomantic-UI 2.9.0 was released today!',
        actions: [{
          text: 'Awesome, thanks!',
          class: 'green',
          icon: 'save'
        }]
      });
    });
  });
</script>

Expected result

console will report 0 error

Actual result

console will report two error

Issue Analytics

State:
Created a year ago
Comments:5 (2 by maintainers)

Top GitHub Comments

2reactions

lubber-decommented, Oct 20, 2022

Assuming my code looks like this, how do I configure it?
<body>
<div class="zzz">
  <div class="pusher">
    <button id="xxx">kkk</button>
  </div>
</div>
</body>

In that case you can change the context setting to the zzz selector

context: '.zzz',

See https://jsfiddle.net/43xcr7u8/

1reaction

lubber-decommented, Oct 18, 2022

Flyout needs a special page layout containing a “pusher” element. If it is not available, the module will create one for you and let you know by this console message. Thus, this is intended. See https://fomantic-ui.com/modules/flyout.html#page-structure

The second console message is a logical successor of the first. Because flyout had to create the pusher, but it also had to dynamically create a flyout (which assumed there was a pusher existing, but wasn’t)

Here is a jsfiddle with a pusher and your example code not showing the console messages anymore https://jsfiddle.net/lubber/g6pnu3qL/1/

Top Results From Across the Web

$id() scope wrong with teleport #2796 - alpinejs/alpine - GitHub

I noticed that $id('my-id') is inconsistent in generating the IDs. That might be because alpine begins a new scope when seeing a <template>...

Amazon.com : BUG-A-SALT Bug-Beam

Become a tactical master and take your Bug-A-Salt to the next level with the Bug-Beam laser attachment! Manufactured by BUG-A-SALT, and fits perfectly...

831958 - Story - Access the Options Flyout - Bugzilla@Mozilla

I think that the remaining issues/changes are outside the scope of this story. The problem with the dialog buttons affects all modal dialogs...

Bug-A-Salt Bug-Beam Laser Adapter Kit - Cabela's

This handy tactical accessory makes it easier and faster to sight in on annoying flies and other flying pests with your BUG-A-SALT 2.0,...

Bass Pro Shops FlyShooter The Original Bug Gun

The Bass Pro Shops® FlyShooter The Original Bug Gun is handy to have at home, office, picnics, boating, camping, hunting, fishing, anywhere and...