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.

Wrapping of `.ui.buttons`

See original GitHub issue

[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.

Issue Analytics

State:
Created 2 years ago
Comments:5

Top GitHub Comments

2reactions

AllanJardcommented, Nov 12, 2021

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!

1reaction

lubber-decommented, Oct 6, 2022

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 😉