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…)
A fix for this is not easily achieved without reviewing the way Cwicly lists are rendered on the frontend as we don’t fully control the RichText controller.
An in depth review of the Cwicly List block is planned.
While we appreciate this is an inconvenience for users on the backend, the flexibility provided by the Cwicly List block is something we have to consider before reworking it.
