I have a blog collection which, for some reason that I can’t workout, the collection list output is being cropped. This page The Bookkeeping Contractors Blog - The Back Office Company.
As you can see in the screenshot below, the missing content is there but it is not being rendered.
And it seems to be only happening in Chrome and Edge, Firefox is fine.
The list isn’t using pagination, and there isn’t a height restriction on the div containing the content.
Any ideas what is causing this? Is it a bug? (I suspect that’s what it is.)
Here’s the Share file
cntrl-summary class you are floating your items.
Remove the float styling to avoid weird layout issues like these.
Thanks, that’s worked, which I don’t understand; float left shouldn’t be causing that sort of a problem.
Tbh, I’m not certain why that’s a problem either.
But what I’m seeing in general is that with the evolution of HTML & CSS there have been a lot of competing layout approaches released… grid, flex, tables, float, and natural relative flow, plus artefacts like CSS transforms and 3d transforms.
When you combine them, sometimes the browser can’t cope and it blows up in unpredictable ways. A common problem I’ve been dealing with lately is layers and stacking orders, which break things like sticky and some z-index setups.
I’ve not dug into it far but it appears that each layout model uses and entirely different model for calculating placement, so when you mix them, the browser basically gets an undefined “I can’t calculate that” situation.
Thinking of adding a 3rd monitor, so that I can always have chrome devtools visible…