[4.x] Fix ButtonGroup from overflowing #10000
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Change:
This PR introduce a ResizeObserver for the ButtonGroup to handle the Overflowing cases.
Fix: #9044
Fix: #9830 (Indirectly by removing the
width: 1%
of thebutton-group.css
file - which was interfering with this)Some observations:
button-group.css
file. If needed, I can naturally put all css in theresources/css/elements/buttons.css
file.Example:
Example 1
When the button group can correctly be displayed as a flex row element, then the button still works the same:
Example 2
When the button group does not have enough place to be displayed correctly without overflowing, then it will be display as a vertical button group:
Example 3
This also works in other field types, like the replicator, grid, etc...:
Without overflowing:
With overflowing:
Or using the #9044 as an example:
Without overflowing:
With overflowing: