[Pagination/Menu] Flex-wrap should be set for all inline-flex styles

[mvorisek]

Bug Report

Some selectors have display: inline-flex; style, but are not wrapped. See actual/expected demo.

adding flex-wrap: wrap; style to these selectors fixes the issue

related with #2157

Expected result

https://jsfiddle.net/d3w6uqnf/

Actual result

https://jsfiddle.net/n18kh4jg/

Screenshot (if possible)

Version

2.8.8/latest

[lubber-de]

This also needs proper styling when wrapped, so i suggest to adopt the logic from wrapping buttons we recently implemented by #2217

[lubber-de]

I'll tag this as a feature rather than a bug, because it's up to the developer how many page-items are rendered (if it was only 1,2,3..40 a wrapping would not be needed)

[mvorisek]

is there any way how can use the latest develop inside jsfiddle.net?

[lubber-de]

Yes, use the nightly CDN tag
https://cdn.jsdelivr.net/npm/fomantic-ui@nightly/dist/semantic.min.css
https://cdn.jsdelivr.net/npm/fomantic-ui@nightly/dist/semantic.min.js

[mvorisek]

Yes, wrapping class is the solution and it should be supported for any component that has display: inline-flex; styling.

demo https://jsfiddle.net/qatcLn73/ (of course, normally there should be no buttons class)

[lubber-de]

As i mentioned above, just wrapping the elements most always breaks the styling, so whenever we would support a "wrapping" class those elements would need more adjustments to also work in all existing variations. (See your own example, it does not look right:

For the pagination menu at least the borders would need to be moved to the left instead of the right. We did something similar for List items back then in #353

If we would simply provide a general "wrapping" class into the FUI core, which would just add flex-wrap: wrap, people will start complaining about elements not looking good again (as we are not tailwind which leaves everything up to the user). That's why much more was needed to make it work for buttons in #2217.

[lubber-de]

Implemented by #2682 for menu component