Tabs don't work with flexbox?

trying to design a professional application and i’m trying to make a bar bar using the tab component, and then make it all flexbox. But i’m running into some issues with it.

I can style the tabs with flexbox, but the tab contents is not behaving for me. I’m not sure what to do with into make it work, but any suggestions would be welcome.

R

never mind, i think i figured it out now…i’m not too swift :yum:

Please share your experience. I have also tried to apply flexbox on a tabs widget with no success.

you have to fiddle with the styles and literally turn any preset styles completely off. It’s frustrating at first, but i’m starting to get it now.

Check out the app so far:

http://museotest.webflow.io

Then the designer:

see if it helps you out :slight_smile:

R

1 Like

argh…nevermind…stuck again… :confused:

You cannot style the components itself. Add in a div inside of what you are trying to style, and set that to flex instead.

The tab component has several sub components. Are you saying that I should add a div inside each tab subcomponent and put the next sub component inside each new div that i have added?

The tab bar component contains:

Tab Bar
-----Tab Menu
----------Tab Link ( time however many tabs)
-----Tab Content
----------Tab Contents

Which ones can I style with flexbox and which ones need to have a div added inside of them so that i can style them with flexbox?

I am basically trying to hack web flow to built an application, which exists in one view with multiple panels that can be opened, closed, scrolled, zoomed in and out, and other sorts of app like things…think photoshop or Illustrator, or Logic Pro, or even a more complex webflow…

I am also trying to nest tabs inside of tabs, which is presenting other problems as well. I’m essentially trying to create a tabbed navigation structure where a row of 4 tabs can each be clicked open of closed, then then a new row of 4 tabs opens up for each of the original 4 tabs. Essentially this creates 16 tabes total, with Level 1 containing 4 tabs, the level 2 contain 4 x 4, or 16.

This seems challenging for web flow, so maybe i should simply do this in code, as webflow is reaching it’s limits and usefulness in this regard…

but any thoughts that can help out would be greatly appreciated :grin:

R

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.