Hi, I love the list item block, and flex box on li elements really does that job.
BUT…
A lot of users, myself included, like to have some text bold/strong for reading/marketing purposes. And yes, Flexbox treats this as an element of course so you get a strange look once an element needs a new rule. see screenshot.
This is the code:
Adding flex-wrap: wrap; makes it better, but than the problem arises that the text will go under the list-item. see screenshot.
I would expect to happen that I can add elements inside a list item without effecting the layout.
Maybe there is a way out of here with CSS, but it would be great if Cwicly offered this option.
This is unusual as the List block (with icons active), does have the necessary added to it to ensure this doesn’t happen.
Have you added any particular properties to the block?
Could I possibly have a screenshot of the whole block markup (with the div)?
No, only used the list block and filled it in with text.
Also normal list item…
Here you can see the DOM yourself: Webmaat
(mind that there’s still a mixed content problem with the Cwicly Stylesheets for which I e-mailed you 2 days ago. in firefox you have to bypass this to view the right CSS rendering…
I’m sorry, I wasn’t clear. It happens when you make screen smaller. So on mobile you get to see the problem. it also occurs when I relative style it with span. So the problem is flex box on li element.
I can confirm the issue with the List block when icons are active. As you rightly described, the display: flex; property makes it very difficult to have the items wrap properly.
In this case, we will be adding an outer <span> element inside the <li> element to contain the inner children and resolve the issue.
An option will also be provided in case you don’t want to have this <span> element added.
Hi @Louis
It seems that the problem has been resolved in the frontend, but it still persists in the backend. I have a list with icons and some parts of the list items are bolded. The frontend looks fine, but the backend appears as follows:
I am aware of the “Remove List Container” option, which is disabled for me to include a <span> element inside a <li> . However, it seems that the <span> element is added only in the frontend, not in the backend. At least, that’s the case for me."
Bump!
I confirm what @krievinshj wrote: span is not added inside the editor.
By the way, is the use of flex really appropriate here?
I wish this block was closer to standard HTML ul/li tags so that we could use the same CSS for styling.
(I guess the SVG icon adds complexity to the classic list, though…)
