Repository navigation
[BUG] Daterange picker layout changes Dash 3.4 to 4.0 to 4.1 #3784
Description
When using a daterange picker with style={"width": "fit-content"} inside a dashbootstrap Row, the layout keeps changing between Dash releases. Biggest change is from Dash 3.4 to Dash 4.0, but Dash 4.0 to 4.1 introduced another layout change.
The following example creates 3 different layouts, but under 3.4 it works as expected:
from datetime import datetime, timedelta, UTC
from dash import Dash, dcc, html
import dash_bootstrap_components as dbc
end_date = datetime.now(UTC).replace(hour=0, minute=0, second=0, microsecond=0)
start_date = end_date - timedelta(days=7)
app = Dash(__name__, title="Dash", external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = (
html.Div(
dbc.Row(
[
dbc.Label("Date Range", className="me-2", width="auto"),
dcc.DatePickerRange(
id="date-range-picker",
start_date=start_date,
end_date=end_date,
display_format="YYYY-MM-DD",
style={"width": "fit-content"},
)
],
justify="center",
align="center",
className="g-0 flex-nowrap",
)
),
)
if __name__ == "__main__":
app.run(debug=True)Dash 3.4 (with bootstrap 2.04):
Dash 4.0:
Dash 4.1:
The cause seems to be extra HTML div that are inserted. One for Dash 4.0 and two for Dash 4.1.
Dash 3.4
Dash 4.0
Dash 4.1
Metadata
Metadata
Assignees
Labels
No labels
Activity
AnnMarieW commentedon May 14, 2026
There are some changes that affect style when moving to the dash 4 components.
In this case, you can get the same result by applying the style to an outer container of the date picker component. For example:
ghaarsma commentedon May 18, 2026
Thank you for the proposed workaround. I think only
dcc.DatePickerRangeanddcc.DatePickerSingleare affected. All other dcc do not insert additional div's around the component. Which makes for a somewhat inconsistent Developer experience and perhaps hard to understand for a HTML/CSS novice.After the Dash 4.0 we fixed up the various Date pickers with an added CSS rule:
However this broke again in 4.1 due to an additional pure div (no style, id, or class) surrounding the
<div class= dash-datepicker>If it is not possible to go back to original 3.4 layout, would it be possible to remove the additional pure div introduced in 4.1?