Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬 Register for the Oct 27 webinar.

Css changes upon dash bootstrap component button click

I am using dash bootstrap elements and have a custom css file to set styling of different <divs> and use some inline style as well.

However, when I click the dash bootstrap button, it messes up the css. It maybe a bootstrap thing, however, I am not sure what the fix is.

Sample code:


html.Div([
       # Plot properties map
       dcc.Graph(id='map-graph1',
                 style={'display': 'inline-block', 'width': '900px', 'float': 'left', 'height':'750px', 'margin-left':'0%'}
                 #style={'display': 'inline-block', 'width': '900px', 'float': 'left', 'margin-top': '7%', 'height':'750px', 'margin-left':'0%'}
       ),

   ], className='map-style',
      style={"width": "38%"}),


html.Div([

            #dbc.InputGroupAddon("Lease Type"),
            dcc.Dropdown(

                    id='lease-type',
                    options=[

                        {'label': 'Gross or Full Service', 'value': 'Gross or Full Service'},
                        {'label': 'Modified Gross', 'value': 'Modified Gross'},
                        {'label': 'Triple NNN', 'value': 'Triple NNN'},
                        {'label': 'Flex', 'value': 'Flex'},
                        {'label': 'Sublease', 'value': 'Sublease'}

                    ],
                    placeholder='Lease Type'
            ),

       ], style={"height":"350px", "width":"35%", "margin-top": "19%"}),



       html.Div([

            dbc.Button("Generate Comps", id="comps-button", size="lg", className="mr-1"),

        ], style={"width":"50%", "margin-top": "-20.6%"}),

    ], className='prop-style',
       style={"width": "30%", "font-size":"1.08em", "float": "left"}),

Before button click:

After button click: