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:
