NO BUG: Align elements in row using queried nestable tabs break them

[robert_looplabs]

Hey, I am working on this component, which is getting the tabs items from CPT. This is working great until I add display: flex / display: grid or just any display property on PANE element. After display prop is added, nestable tabs are shown all at once.

Component design:

Implementation at the moment:

After adding display prop on PANE element:

After wrapping PANE childs into one more div and adding display prop in that, the max-width breaks:

Anyone encountered this? How to align elements inside the PANE into row? Inline block not working too btw. Thanks a lot!!

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

[Please describe this bug in as much detail as possible so we can replicate & debug this bug]

[timmse]

Hi Robert,
Thanks so much for your report!

First of all, the tabs are shown and hidden with display: block and display: none. This means that if you set a different display value like flex or grid (on the ID), it’s set in stone so they will no longer work.

@robert_looplabs

After wrapping PANE childs into one more div and adding display prop in that, the max-width breaks.

The best way to find out is with a live link. I don’t even know which display value you are using/how to reproduce the issue

Best regards,
timmse

[robert_looplabs]

Hey! Thanks for fast reaction https://lilawadi.previewed.xyz/

[timmse]

Hey Robert,

@robert_looplabs

After wrapping PANE childs into one more div and adding display prop in that, the max-width breaks:

Please make sure the left google star rating div is set to flex-wrap: wrap and the “slider column div” has a “fixed width” (in percentages, for example) and additonally flex-grow: 1. For some reason, the slider seems to need a wrapper with a fixed width in this case

Then it should work as far as I can see - it’s not quite so easy due to the many classes

[robert_looplabs]

Thanks so much, this fixed it! Wrt classes, I am trying this new approach of creating own util classes and so far it works like a charm. Do you think / know about why it potentially could be worse approach than creating classes for specific components like .review-single-wrapper etc…? Thanks for your insight.

[timmse]

You’re welcome!

From my point of view, both utility classes and custom “component-based” classes are a good thing that complement each other wonderfully.

As a rule, I use both: if something can be achieved with a maximum of three utility classes I go the utility route, if there are more I create a custom class. But everyone can do that however they want

[robert_looplabs]

Exactly! Best approach so far since I dont want to bloat it with ACSS, oxyprops etc…Thanks for everything and good luck with handling being the top builder in no time!