I’m building a custom widget where a compact oh-swiper-card expands inline (no popup) into a detail layer when tapped, using a CSS opacity/transform transition. Both layers are siblings inside a position: relative container.
The issue: there’s a small but stubborn gap (~15-20px) between the outer container and the actual content of the expanded layer. I’ve tried:
Setting margin: 0 !important on the hidden swiper element
Using a CSS :has() selector to target the outer wrapper <div class="card oh-card"> that oh-swiper-card generates automatically
Moving the spacing from individual card margins to a single padding on the shared parent container
Despite that, a visible gap remains. Inspecting it in DevTools shows the outer container (lc-container) is noticeably taller than the actual content box (lc-expand-inner) — see screenshots below.
Has anyone run into this with oh-swiper-card? Specifically: does the component render an extra wrapper div with its own inline margin that isn’t controllable through normal CSS classes? Any pointers on how to fully neutralize spacing coming from that component when building a custom expand/collapse layout around it would be much appreciated.
This is a pretty complex widget you’re trying to put together here, so it’s understandable that it’s many hundreds of lines long. That said, from just a quick look, I’d estimate that maybe 30% - 50% of what’s there is extraneous and all that chafe is masking the various combined issues that lead to your spacing problem.
From what I see there are two things leading that spacing: 1) when you hide the card you are just setting it’s height to 0; you are not actually removing the card from display. So, the card’s margins are still there taking up space even though the card content itself has no space. 2) You’ve use f7-blocks everywhere (this is never a good idea in a complex widget). The block class in F7 comes with a whole host of extra styling some of which you won’t even see in the widget editor because it depends on other factors that are not present on that page) and a lot of what you have in various styles and stylesheets is fighting against those built-in block styles. Just replace most or all of your f7-block with div and you can remove probably several hundred lines of styles (such as most of the margin: 0 and padding: 0 styles).
I’m guessing that you did not use display: none to hide the elements that are not being shown because you are trying to smoothly transition between the two and setting display to none just causes the element to wink out immediately. The transition-behavior css property has been specifically designed for exatly this kind of scenario. You can use this setting to allow the inclusion of discrete properties such as none in transitions which sets up a sequence where a continuous transition such as height is followed by a change in a discrete property such as display:
So, between getting rid of the block styles and setting the card to display: none when hidden you can eliminate that space you are seeing.
