Hi all,
For those who want a glimpse of what’s possible with customizing the Softr tab container=>
https://matt7933.softr.app/native-tabs
How to do this?
All css codes to be inserted in the header of the page settings.
Tab Design 1
<style>
#tab-container5 [role="tablist"] {
border-bottom: 0px solid #FFFFFF !important;
}
#tab-container5 button:not([title="Prev"]):not([title="Next"]) {
background-color: #ffffff !important;
color: #000000 !important;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
font-family: Arial, sans-serif;
outline: none;
transition: background-color 0.3s;
border-radius: 15px 15px 0 0 / 15px 15px 15px 15px;
}
#tab-container5 button:hover:not([title="Prev"]):not([title="Next"]),
#tab-container5 button:active:not([title="Prev"]):not([title="Next"]),
#tab-container5 button[data-state="active"]:not([title="Prev"]):not([title="Next"]),
#tab-container5 button[data-state="active"]:hover:not([title="Prev"]):not([title="Next"]) {
background-color: #F2F2F2 !important;
border: none !important;
border-radius: 15px 15px 0 0 / 15px 15px 15px 15px;
}
</style>
Tab Design 2 (same as design 1 but squared borders)
<style>
#tab-container4 [role="tablist"] {
border-bottom: 0px solid #FFFFFF !important;
}
#tab-container4 button:not([title="Prev"]):not([title="Next"]) {
background-color: #ffffff !important;
color: #000000 !important;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
font-family: Arial, sans-serif;
outline: none;
transition: background-color 0.3s;
}
#tab-container4 button:hover:not([title="Prev"]):not([title="Next"]),
#tab-container4 button:active:not([title="Prev"]):not([title="Next"]),
#tab-container4 button[data-state="active"]:not([title="Prev"]):not([title="Next"]),
#tab-container4 button[data-state="active"]:hover:not([title="Prev"]):not([title="Next"]) {
background-color: #F4F2EE !important;
border: none !important;
}
</style>
Tab Design 3
<style>
#tab-container3 button {
transition: font-size ease 0.2s !important;
}
#tab-container3 button:hover {
font-size: 16px !important;
}
#tab-container3 button[data-state="active"] {
font-size: 16px !important;
}
</style>
Tab Design 4
<style>
#tab-container2 [role="tablist"] {
display: flex !important;
justify-content: center !important;
}
</style>
Tab Design 5
#tab-container1 [data-testid="tab-button"]:hover,
#tab-container1 [data-testid="tab-button"][data-state="active"] {
border-bottom: 2px solid #3278FF !important;
color: #3278FF !important;
}
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)
2 Likes
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?
Hi Jacques,
What code do you use exactly?
<style>
#tab-container1 [role="tablist"] {
border-bottom: 0px solid #FFFFFF !important;
}
#tab-container1 button:not([title="Prev"]):not([title="Next"]) {
background-color: #ffffff !important;
color: #000000 !important;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
font-family: Arial, sans-serif;
outline: none;
transition: background-color 0.3s;
border-radius: 15px 15px 0 0 / 15px 15px 15px 15px;
}
#tab-container1 button:hover:not([title="Prev"]):not([title="Next"]),
#tab-container1 button:active:not([title="Prev"]):not([title="Next"]),
#tab-container1 button[data-state="active"]:not([title="Prev"]):not([title="Next"]),
#tab-container1 button[data-state="active"]:hover:not([title="Prev"]):not([title="Next"]) {
background-color: #F2F2F2 !important;
border: none !important;
border-radius: 15px 15px 0 0 / 15px 15px 15px 15px;
}
</style>
Can you test this:
<style>
#tab-container1 [role="tablist"] {
border-bottom: 0px solid #FFFFFF !important;
}
#tab-container1 [data-testid="tab-button"]:not([title="Prev"]):not([title="Next"]) {
background-color: #ffffff !important;
color: #000000 !important;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
font-family: Arial, sans-serif;
outline: none;
transition: background-color 0.3s;
border-radius: 15px 15px 0 0 / 15px 15px 15px 15px;
}
#tab-container1 [data-testid="tab-button"]:hover:not([title="Prev"]):not([title="Next"]),
#tab-container1 [data-testid="tab-button"]:active:not([title="Prev"]):not([title="Next"]),
#tab-container1 [data-testid="tab-button"][data-state="active"]:not([title="Prev"]):not([title="Next"]),
#tab-container1 [data-testid="tab-button"][data-state="active"]:hover:not([title="Prev"]):not([title="Next"]) {
background-color: #F2F2F2 !important;
border: none !important;
border-radius: 15px 15px 0 0 / 15px 15px 15px 15px;
}
</style>
[data-testid=“tab-button”] is the selector I added to be more precise (and it should be a long term selector for Softr => maintainable)
1 Like
Hi. Thanks! But:… That doesn’t work Look at the image
It does work, tested.
What is the exact code you have for this page?
Demo here: Action Buttons Design (2nd tab container at the bottom of the page)
1 Like
Hi! It works now. Maybe it was the cach of the browser… Thanks!!!
1 Like
Thanks Mat!
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.
Thanks
Hi Gabriel,
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.
1 Like
