CODEWITHSUNDEEP
pythonhtmlcssplotlyplotly-dash
Confused
Confused

Reputation: 353

Plotly dash dropdown boarder not coming as expected

I am creating a Plotly dash with a dropdown menu. I am providing a border for the dropdown menu. I have a main heading. I need the dropdown menu to come after the main heading with a box. Please see my code below.

Now, what is happening is my border is covering my main heading also. I don't need that. I need the border for the dropdown section only. Please see the attached image which shows my current situation.

May I know where I went wrong

fig_dropdown = html.Div([
    
    html.Div(html.H1(children="TEST SUIT1"),style={'textAlign': 'center','color': '#5742f5', 'fontSize': 20}),
    
    dcc.Dropdown(
        id='fig_dropdown',
        options=[{'label': x, 'value': x} for x in fig_names],
        value=None
    )], style= { 
                 
                 'border': '#eb345b',    
                 'color': '#5e34eb',
                 'borderStyle':'dashed',
# #                  'width': '50%',                  
                 'font-size': '20px'
                                      
                }
)

enter image description here

Upvotes: 1

Views: 1309

Answers (1)

KJDII
KJDII

Reputation: 861

I didn't render this, but wrapping the dropdown in a div, and then applying the style there may give you what you're looking for. From your example, you are applying the style to the very first html.Div()

fig_dropdown = html.Div([
    html.Div(
        html.H1(children="TEST SUIT1"),
        style={
            'textAlign': 'center',
            'color': '#5742f5', 
            'fontSize': 20}),
    html.Div(
        dcc.Dropdown(
            id='fig_dropdown',
            options=[{'label': x, 'value': x} for x in fig_names],
            value=None
            ), style= {              
                    'border': '#eb345b',    
                    'color': '#5e34eb',
                    'borderStyle':'dashed',
                    # 'width': '50%',                  
                    'font-size': '20px'          
                    }
            )])

EDIT: I myself placed the style in the wrong position. :)

enter image description here

Upvotes: 2

Related Questions