I have a set of five dcc.Tabs that are taking about 400px of space. I have them with their label defined in a dbc.Col with width=12 so nothing should be horizontally constraining them. With the browser 800px or more the tabs are correct:
Hi @marketemp
It’s estrange because usually the dcc.Tabs use two rows when there are not enough space.
Are you using dcc.Tabs or dbc.Tabs (prove with the other option to see if both dcc and dbc has the same behavior)
I started using dbc.Tabs that looked like tabs and then switched to dcc.Tabs for improved styling. My dcc tabs look like a clean button group.
Making the switch to test I had to redefine a few of my attributes and still don’t have the tabs working properly, but can confirm that the premature vertical behavior does not occur with dbc.Tabs. My best bet is probably to play with the styling and stick with dbc.Tabs
I hate to sound miserable here, but I am miserable.
I switch from dcc.Tabs back to dbc.Tabs to fix this issue and you figure since it’s Bootstrap it should have better styling control. Sorry, between active_tab_style, active_label_style, activeTabClassName, and activeLabelClassName getting it to format correctly is utter chaos. The biggest issue that I am typing this all out for is no matter what setting I use, the active font color comes out black and I want it white. After an hour of tinkering I am setting for the default.
@marketemp
I had the same problem and then I decided to use one variable with all the active tab css properties that I wanted and then assign it to both styles components (active_tab_style and active_label_style) and it works.
oh that would be so nice… review Can't set active tab font color (always black) and after much fussing I have it OK with one
active_label_style=self.dash.style['tab_selected'],
which I am sure a CSS and tab genius can figure out but I don’t have time to.
Hey @marketemp
Could you clarify what you want the tabs to look like? I’m happy to try and help.
This example shows that it’s possible to change the font color of the active tab label
import dash
import dash_bootstrap_components as dbc
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
dbc.Tabs(
[
dbc.Tab(
f"Content {i}",
label=f"Tab {i}",
active_label_style={
"color": "white",
"backgroundColor": "blue",
},
label_style={"borderRadius": 0},
)
for i in range(3)
]
),
className="p-5",
)
if __name__ == "__main__":
app.run_server(debug=True)
Though it seems like what you are trying to do is use the tabs like a button group? If that is the case I recommend using dbc.RadioItems instead, and using a little CSS to make them look like buttons rather than radios. Here’s an example of that
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
[
dbc.RadioItems(
id="radios",
className="btn-group",
labelClassName="btn btn-secondary",
labelCheckedClassName="active",
options=[
{"label": "Option 1", "value": 1},
{"label": "Option 2", "value": 2},
{"label": "Option 3", "value": 3},
],
value=1,
),
html.Div(id="output"),
],
className="p-5 radio-group",
)
@app.callback(Output("output", "children"), Input("radios", "value"))
def foo(value):
return f"Selected value: {value}"
if __name__ == "__main__":
app.run_server(debug=True)
and add this to assets/
/* Turn off existing buttons */
.radio-group .custom-control-input ~ .custom-control-label::before {
content: none;
}
.radio-group
.custom-radio
.custom-control-input
~ .custom-control-label::after {
content: none;
}
/* restyle radio items */
.radio-group .custom-control {
padding-left: 0;
}
.radio-group .btn-group > .custom-control:not(:first-child) > .btn {
margin-left: -1px;
}
.radio-group .btn-group > .custom-control:not(:last-child) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.radio-group .btn-group > .custom-control:not(:first-child) > .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
Hi Tom, thanks for the reply. It is sinking in now that my problem is 99% to do with that I am using all of my components but not using dbc.Container because multiple calls to dbc.Container in my multi-page app shifts things a few pixels to the right. After so long, I forgot that was a requirement and this is the second time I complained about a bug which really wasn’t a bug for this reason. sorry about that.
Back to tabs vs radio buttons, I have used tabs essentially looking like radio buttons so I will probably switch over to buttons. I remember wanting buttons in the first place and Dashers persuading me to use tabs and just stuck with it. The radio buttons are ugly but you have already shown me a smoother way of doing a button group at Resetting the active button in a dbc.Buttongroup I should have just stuck with that code but something persuaded me to use tabs.
I have a built a pretty awesome app that I am planning on starting a business with. If you ever have the time for a quick Zoom and review of the code to figure out the Container issue, that would be fantastic.
Damm even I am having a similar kind of issue, I have searched all over the internet and even have posted on number of threads on different forum, no solution seems to work. I am really frustrated, can anyone of you here help me resolve this issue, I am very much tired now.