Match font style between dropdown and date range picker

Dash Python
1

Hi:

I am creating a set of control to let users pick a preset dates range, such as a week, two weeks, a month, and a year, or a custom set date range. I am using a dropdown menu and the date range picker to achieve this. However, I ran into the following problems:

  1. the font on the dropdown is bolded. I want it to be unbolded;
  2. the font family and transparency don’t match the date range picker;
  3. the font in the dropdown is not aligning vertically in the center;
  4. reduce the gap between the dropdown and the date range picker

Additionally, I want to adjust the three controls as a group to be all the way to the right edge of the banner, but I am having trouble getting it there.

Here is the code I am using:

import dash
import dash_bootstrap_components as dbc
from dash import dcc, html
from dash.dependencies import Input, Output, State
from datetime import datetime as dt


app = dash.Dash(
    __name__,
    external_stylesheets=[
        dbc.themes.MINTY,
    ],
)

banner = dbc.Row(
    [
        dbc.Col(
            html.H1(
                "Dashboard",
                className="my-3",
                style={"margin-left": "10px"},
            ),
            width = 9
        ), 
        dbc.Col(
            html.Div(
                dcc.Dropdown(
                    id="preset-day-selection",
                    options=[
                        {'label': '7 days', 'value': 'button-1'},
                        {'label': '14 days', 'value': 'button-2'},
                        {'label': '1 month', 'value': 'button-3'},
                        {'label': '1 school year', 'value': 'button-4'},
                    ],
                    value='button-4',
                    clearable=False,
                    style={
                        'fontSize': '1.1em',
                        'height': '48px',
                    },
                ),
                style={
                    "font-weight":"normal",
                    "width":"100%",
                    "align-items":"center",
                    "text-align":"center",
                    "font-family":"sans-serif",
                    "font-color":"grey",
                    "font-size":"1.1em"
                }
            ),
            width = 1,
            style={
                "display": "flex",
                "align-items":"center",
                "justify-content": "flex-end",
                
            }
        ),
        dbc.Col(
            [
                dcc.DatePickerRange(
                    id="date-picker",
                    start_date_placeholder_text="Start Date",
                    end_date_placeholder_text="End Date",
                    calendar_orientation="horizontal",
                    min_date_allowed=dt(2014, 8, 1),
                    initial_visible_month=dt(2022, 1, 1),
                    start_date=dt(2020, 8, 3),
                    style={
                        "background-color": "#FFA500",
                        "margin-left": "5px",
                        "display": "flex",
                        "flex-direction": "row",
                    }, 
                    className="me-1"
                ),
                dbc.Button("Search", id="apply-button", color="primary", class_name="me-1 btn-pill"),
            ],
            width = 2,
            style={
                "display": "flex",
                "align-items": "center",
                "justify-content": "flex-start",
                "background-color": "#FFA500",
            },
            className="g-0"
        ),
    ],
    className="my-3",
    style={"background-color": "#FFA500", "color": "black"},
)

app.layout = dbc.Container(
    [
        banner, 
    ], 
    fluid=True, 
    className="p-5"
)


if __name__ == "__main__":
    app.run_server(host="10.1.1.1", port=8023, debug=True)

Here is the result I am getting:

Screen Shot 2023-06-05 at 11.46.34 AM
Screen Shot 2023-06-05 at 11.46.34 AM2531×204 9.09 KB

Thank you in advance for your help.

Mike

2

Hello @chainster_mike and welcome back to the forum!

Making these changes to DBC components is possible through cusom css in assets folder. You will need to find the right selector through developer console (F12) and place the change in your custom css. Example of this approach can be seen i.e. here: python - Styling Accordion tab dash bootstrap component - Stack Overflow. This applies the style for all components. If you want to apply it only for this one component you have to create css class and apply this class to your component.

From my personal experience I will recommend to have a look at Dash Mantine Components. I love creating these pixel perfect layouts and I prefer do it all in one place in python instead creating css classses. DMC has prop called styles API and you can access selectors directly from the components definition. I wrote a post about one problem I was trying to solve where I utilized styles API. Have a look here: dmc.Select and dmc.MultiSelect blended into the title using Styles API and PIL

3

Hi @martin2097 , thank you very much for your suggestion. I will try the dmc.Select first and see if I can get the font to match. I haven’t used dash for awhile now so I need to read the documentation first. Will update later.

1 Like