Note that if you have a lot of tabs or if you are on mobile, you will need to use the :not pseudo-class so that the left and right arrows (Prev/Next) appear for tab navigation.
By using the :not pseudo class I exclude these two arrows from the css rules I wrote.
You can see it in the codes of Tab Design 1 and Tab Design 2 (the use of :not is specific to these two tab containers as the written css rules apply to the whole button… While the left and right arrows are also inside a button element)
Hi!
Thank you very much for the code. Again, it is something I was looking for and needed. One question: When I smell the code and on an ab sheet there is also an abel with action buttons, the action buttons are also affected by the code. How can I prevent this?
I have a question for you:
If I have an ADD form with 3 steps. I would like to place every step in a different tab. How do I manage the submit or save button?
I would like to use the tab container instead of the multi-step form.
Unfortunately this is impossible to do this. Too much limitations regarding the tab and forms flexibility.
Custom code can do a lot in Softr, but this: clearly not .
Not to mention the workload to maintain it (if this was possible to do it).
A way better solution would be to hardcode a visual step component in a custom code block, just above the form, that would update each time you click a “back” or “next” button within the conditional form. But it would require a lot of work to make it 100% usable.
Hey! The code is working great on the tabs of the container, but it is also applying to the filters of the list blocks contained within. I would rather these stay as the default (or whatever the list block settings are). Is there an easy way to exclude them? Or specify their styles within the code?
Hi James,
The solution is to use #tab-container .tab-list button. I updated the entire thread here with this solution. #tab-container .tab-list button is the stable selector to use
My use case is complex. The page contains a tabbed container with three tabs. The first tab contains several blocks, including two column container blocks. Inside the column containers, each column contains an item details block.
In one column container, each item details block contains one action button. It renders fine.
In the other column container, the left item details block action button is bad. In the right item details block, the primary action button is good but the secondary action button is bad.
What’s bad? The button text is black instead of white. Also, in the secondary button, the top edge of the button is corrupt.
Do you have any suggestions? Softr is blaming the custom code.
Well, hardly knowing any CSS, I am going to assume you mean the names of the blocks in Softr (knowing that I’m probably wrong).
The parent tabbed container block is named tab-container. The child column container block is named phone-email-container. The two item details blocks inside the column container block are phone and email.
.
