CSS page with Tab (horizontal, vertical)

Hello,
Here is a CSS to organize your page with tabs

https://streamable.com/iw38x5

7 Likes

this looks really cool
care to share the code?

oh i see… nevermind… thanks for sharing this!

You have the link to the application to copy it to your Glide area.

I have wanted to do this for a long time. Thank you!

2 Likes

In the tab version, here is the vertical version !!

8 Likes

y si quisiera que me abra un link, se puede.
ejemplo el de whatsapp

This is fantastic @Manu.n !

  • Is it possible to add so fields above the inline lists? (I tried in your app, but it seems to break part of your CSS…). If not, I suppose that a Link To Screen should work
  • Is there a risk that it doesn’t work on some platforms? (ios, android)

Thanks again

Hello,
yes it is possible to add a component before the lists (between Tab # 3 and Inline-list)
And then you have to adjust the visibility parameter

After you have to test on different platforms, there is always something that is not compatible

2 Likes

My sister has a Samsung phone and there’s always something wrong with the Samsung browser. I stopped making things 100% perfect and just accept it :rofl:

1 Like

To add to what Manu said, you have to change the number inside the nth-child brackets here. If you’re adding it on top of those components then the numbers will increase. Say you add 1 then the numbers in the screenshot will become 2, 3, 4, 5, etc.

2 Likes

Ok, I get it.
This means that, if we have many components in the screen (100 in my case) we have to build what @Manu.n proposed when we are definetely clear on the order of components in the screen… otherwise we have to re-customize the nth-child.
Is that correct?

nb: I wish I never saw this nice tab menu: I spent half the day yesterday to build an huglhy menu… now I have to rebuild everything!
image

Yes you must be definitely clear about where those customized components are on the screen. This includes cases when you have visibility conditions. Personally if there’s no reason to put them at the bottom I always put them at the top.

1 Like

I don’t understand everything, but if you have built a page with already visibility according to your menu, the transition with CSS should be easy ???

2 Likes

Hum, I don’t see how because for each item of my current menu (who-why | what | …), there are at least a dozen of components which are displayed.

If you only need to convert the choices to tabs then you only need to care about that.

1 Like

Do you mean just changing the nth-child with the number of each Choice component?

If I recall right Manu was using rich text components for each of those tabs, not choice components.

Hi all,
Is there a way to create these kind of tabs now that we can’t use the CSS (Pro plan)?
With 2 tabs, we can make it work with 2 button blocks (left/right accent based on selection). With more than 2 tabs, we can use a choice component, but can’t set to wide or contain in one horizontal row.
Thank you!

Can you specify what you mean by “wide or contain” here?