[BUG] Daterange picker layout changes Dash 3.4 to 4.0 to 4.1

[ghaarsma]

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

dash_dr_picker.py

[AnnMarieW]

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:

html.Div(
 dcc.DatePickerRange(
 id="date-range-picker",
 start_date=start_date,
 end_date=end_date,
 display_format="YYYY-MM-DD",
 ),
 style={"width": "fit-content"}
)

[ghaarsma]

Thank you for the proposed workaround. I think only dcc.DatePickerRange and dcc.DatePickerSingle are 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:

.dash-datepicker {
 max-width: 250px !important;
}

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?