Guide for Softr Tabs Customization

matthieu_chateau · October 28, 2024, 8:41pm

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)

khawar · October 30, 2024, 5:02am

thanks, super helpful!

jaspijk · October 31, 2024, 7:32pm

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?

matthieu_chateau · October 31, 2024, 9:21pm

Hi Jacques,

What code do you use exactly?

jaspijk · November 2, 2024, 1:51pm

<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>

matthieu_chateau · November 2, 2024, 2:04pm

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)

jaspijk · November 3, 2024, 8:54am

Hi. Thanks! But:… That doesn’t work Look at the image

matthieu_chateau · November 3, 2024, 9:20am

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)

jaspijk · November 4, 2024, 4:49pm

Hi! It works now. Maybe it was the cach of the browser… Thanks!!!

gabrielco · November 20, 2024, 6:39pm

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

matthieu_chateau · November 20, 2024, 7:34pm

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.

James · January 22, 2025, 11:14am

matthieu_chateau:

<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>

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?

matthieu_chateau · January 24, 2025, 12:12pm

Hi James,
I will look into it during the weekend

matthieu_chateau · January 27, 2025, 2:23pm

Hi James,
Here is the solution:

<style>
#tab-container5 [role="tablist"] {
    border-bottom: 0px solid #FFFFFF !important;
}

#tab-container5 button:not([title="Prev"]):not([title="Next"]):not(:is(#list1 button, #list2 button, #list3 button)) {
    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"]):not(:is(#list1 button, #list2 button, #list3 button)),
#tab-container5 button:active:not([title="Prev"]):not([title="Next"]):not(:is(#list1 button, #list2 button, #list3 button)),
#tab-container5 button[data-state="active"]:not([title="Prev"]):not([title="Next"]):not(:is(#list1 button, #list2 button, #list3 button)),
#tab-container5 button[data-state="active"]:hover:not([title="Prev"]):not([title="Next"]):not(:is(#list1 button, #list2 button, #list3 button)) {
    background-color: #F2F2F2 !important;
    border: none !important;
    border-radius: 15px 15px 0 0 / 15px 15px 15px 15px;
}

</style>

Fot you to understand the logic and iterate on it: this is an example of a #tab-container5 having one list block in each tab (3 tabs) with Ids #list1, #list2, #list3