https://kotlinlang.org logo
Join Slack
Powered by
Any tips for sorting out content shift? It's a bit...
# kobweb
c
Any tips for sorting out content shift? It's a bit foreign to me, as its usually not such a consideration with the compose-style
For example - something like displaying a video that takes up the full width of it's parent container. I can't find the right combo of attrs and modifiers to do so without causing content shift after loading
s
code and perhaps a live site or video/screenshots would help understanding what's going on. with content shift, do you mean the video element pushes other elements away once loaded? having a placeholder behind the video might help to fix the layout in place
d
Layouts are very frustrating with HTML / CSS for sure
Definitely feels like one of the legacy baggage issues with HTML elements. Old school elements lay out one way, flexbox elements lay out another, and sometimes there is a clash that is really hard to debug
In general, I think it is autosizing algorithms that really make things go whacky. If you explicitly set every element's width from the <body> element down to your content (e.g. video), things should be a lot more stable. But it's easy to wrap something in a div and not set the width and then you get funkiness happening. Especially if content somewhere else stretches outside the width of the viewport
What I would recommend doing is creating a dummy empty project (
kobweb create app/empty
) and then just fill out its Index page with a nested layer of Boxes and see if you can get the behavior you want there.
c
thanks David! I think one source of my confusion is how you can place width on a Box modifier, Div attrs, or the Video attrs. I think you're right in that I just need to try out a few permutations to understand how they all interact
d
Yeah it's a learning curve for sure. One day I'd like to write a docs article about it but I don't actually think I'm anywhere near qualified
c
Ultimately my issue was using a Box around a Video element. I set the aspect ration & clip on the Box, thinking it would constrain it's children (like in Compose). However, after loading the Video would change height (because I hadn't given it an aspect ratio attr, just the parent Box. In the end, using just a Video element with all the attrs for aspect ratio, clip, etc. without wrapping in a Box worked better.
d
Ah yeah, fair. Videos / Images are annoying with how they size. One sec, let me see how I handled it in my own site.
2 Views
Open in Slack
PreviousNext
Powered by