-
Notifications
You must be signed in to change notification settings - Fork 4.9k
Wrapping of .ui.buttons #7069
Description
[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.