JKiely JKiely -4 years ago 147
Javascript Question

Semantic UI popup fluid tag not working inside of ui item class

I'm trying to create a Popup Menu, much like the example in the docs, but the

attribute stops working if I wrap the popup in a
ui item
class as well as a menu class. Instead the popup just appears as wide as the button.

I need the
ui item
class in order to keep my my menu elements lined up properly, so I'm looking for a work around in order to keep the fluid attribute (or get an equivalent effect) with both the menu and item classes in place.

My code looks a bit like this (with some additional elements mixed in, but this code is sufficient to replicate the error):

<div class="ui menu">
<!-- Removing ether menu above, or item below will cause the fluid tag to work -->
<div class="ui item">

<div class="ui button">
<div class="ui fluid popup">
<!-- fluid class currently has no effect -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

And a working jsfiddle:


Answer Source

I suspect this is an bug with Semantic UI and I have filed an issue: https://github.com/Semantic-Org/Semantic-UI/issues/5029

It's been added to 'Needs Milestone' but otherwise no word.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download