[Help] Menu bar dropdown items width needs to be increased

[VuppalaMahesh]

Help Wanted

I have Menu bar with pop-over drop-down items in it. I have inserted HTML content in each item dropdown. I want to increase the width of the each popover item.

Testcase

• You can find the test case in the below link. Once you hover on services, the content looks like packed tightly. So, I want to include width of it.

https://jsfiddle.net/MaheshVuppala/5rpv6z8t/1/

Reference link: https://www.peerbits.com/
In the above link, you can find how the width of the popover content is changing from item to item

[TheJltres]

Hi there!

I see you are using .ui.fluid.popup on your menu, but "A fluid popup will take up the entire width of its offset container" (https://fomantic-ui.com/modules/popup.html#fluid). In your case .right.menu.
The main problem with dropdown item width is this word: "TECHNOLOGIES" is too big to fit inside column, so it overflows the column padding.

With this said, I saw two ways to solve it.

1. Overflow
   Solution? You can use overflow-wrap: break-word; or some overflow-x: property
   This fix the problem but is not prity, so I searched in docs and found flowing (https://fomantic-ui.com/modules/popup.html#flowing)

2. Flowing
   If you use this, popup will fit content with no min width. With bigger popup main problem is fixed, text fits inside column.

[VuppalaMahesh]

Thanks TheJltres . Issue is fixed.