Wrapping of `.ui.buttons`

[AllanJard]

[Button] Buttons should wrap inside group

Steps

If you have a button group inside of a grid, and the buttons take up more space than is available in the column, they will overflow rather than wrapping.

Expected Result

The buttons overflow, resulting in visual interruption with the next column.

Actual Result

It would be nice for the buttons to wrap.

Version

2.4.1

Testcase

https://jsfiddle.net/3sw5tyaq/

A possible solution is to add flex-wrap: wrap to the .ui.buttons class: https://jsfiddle.net/3sw5tyaq/1/ . However, that doesn't really work for basic buttons: https://jsfiddle.net/3sw5tyaq/2/ since there is no top/bottom border on the buttons themselves. As far as I am aware, there is no way to add a style when the button is wrapped. We could use a bottom border with a negative margin, but the rgba of the border is effectively duplicated at the bottom: https://jsfiddle.net/3sw5tyaq/3/ .

I'm not sure what the correct answer is here I'm afraid.

[lubber-de]

This is at least supported for responsiveness by the active community fork Fomantic-UI by using stackable buttons https://fomantic-ui.com/elements/button.html#stackable-buttons

See your adjusted jsfiddle here https://jsfiddle.net/lubber/sogfa916/

But i believe your approach is a good way to implement a new button group variation

[AllanJard]

Thanks for your reply! That looks good, but it can still have the overlapping text issue between columns:

Regarding Fomantic-UI, is Semantic UI a zombie project now?

[lubber-de]

Thanks for your reply! That looks good, but it can still have the overlapping text issue between columns:

I see, thats because stackable is designed for button groups inside a 100% width container. Let's continue discussing this feature in the Fomantic-UI Repo (Please open an issue or discussions thread there). I think we can work something out there quickly as 2.9.0 is around the corner 😉

Regarding Fomantic-UI, is Semantic UI a zombie project now?

Well, just look at #7027 #7038 #6945 and decide for yourself 😉

Beside 600+ Bugfixes and new features, Fomantic 2.9.0 will also contain new CSS table variants scrolling and stuck for fixed header/footer/first/last column, as well as other table enhancements which might be interesting for you regarding support in datatables 😉

• https://github.com/fomantic/Fomantic-UI/pull/2134
• https://github.com/fomantic/Fomantic-UI/pull/2148

[AllanJard]

Thank you! I've opened an issue here.

Regarding DataTables - I'll move what we use for Semantic UI over to Fomantic UI. Will post when it is done :-). Delighted to see the project continuing to develop!

[lubber-de]

The community fork Fomantic-UI prepared a new wrapping variant which solves this. (also using basic) https://github.com/fomantic/Fomantic-UI/pull/2217