Hi @tcbegley. I would like to apply dash-bootstrap css to the modal component I am using, but not the other components of my app which I have styled manually.
For some reason when I add dash-bootstrap css file to my ./assets folder, the dash css is loading on my dash table, even though I have not declared the className=‘dash-bootstrap’ to to the div. Oddly, it is not impacting other divs in my app (just the modal which has the className, and the table Div for some odd reason.
Could you look at my code below? Any idea why this is happening?
from app import app
import dash
import dash_table
from dash_table.Format import Format, Scheme, Sign, Symbol
import dash_html_components as html
import dash_core_components as dcc
import pandas as pd
import python.extract_portfolio
from datetime import date as Date
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc
import dash_table.FormatTemplate as FormatTemplate
# load dataframe from python logic
df = python.extract_portfolio.trade_list.sort_index(ascending=False)
# reformat index / trade date
df['Trade_Date'] = pd.DatetimeIndex(df['Trade_Date']).strftime("%b, %d %Y")
# add external css (note: style tags override the external css)
#external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
# serve dash app
app3 = dash.Dash(
__name__,
server=app,
routes_pathname_prefix='/dash3/',
)
# define app.layout
app3.layout = html.Div([
# add new transaction record
html.Div(
[
dbc.Button("Open modal", id="open"),
dbc.Modal(
[
dbc.ModalHeader("Header"),
dbc.ModalBody("This is the content of the modal"),
dbc.ModalFooter(
dbc.Button("Close", id="close", className="ml-auto")
),
],
id="modal",
),
], className='dash-bootstrap'
),
# filter layouts
html.Div([
html.Td('Filter by Ticker(s)'),
dcc.Dropdown(
id='ticker-filter',
options=[{'label': i, 'value': i} for i in df['Symbol_CUSIP'].unique()],
placeholder='Select a ticker to filter by',
multi=True,
#value='AMZN'
)
],
style={'width': '20%', 'float': 'left', 'display': 'inline-block', 'fontFamily': 'Arial', 'fontSize': '12px'},
#className='dash-bootstrap'
),
html.Div([
html.Td('Filter by Transaction Type(s)'),
dcc.Dropdown(
id='transaction-type-filter',
options=[{'label': i, 'value': i} for i in df['Transaction_Type'].unique()],
placeholder='Select a transaction type to filter by',
multi=True,
)
],
style={'width': '20%', 'float': 'left', 'display': 'inline-block', 'fontFamily': 'Arial', 'fontSize': '12px'}
),
html.Br(),
html.Br(),
html.Br(),
# table layout
html.Div([
html.H4(
"Transaction Records",
id='datatable-interactivity-container',
style={'fontFamily': 'Arial'}
),
dash_table.DataTable(
id='table',
page_action='none',
# data import
data=df.to_dict('rows'),
columns=[
{
'id': 'Trade_Date',
'name': 'Trade Date',
},
{
'id': 'Symbol_CUSIP',
'name': 'Ticker',
},
{
'id': 'Account',
'name': 'Account',
},
{
'id': 'Transaction_Type',
'name': 'Transaction Type',
},
{
'id': 'Description',
'name': 'Description',
},
{
'id': 'Quantity',
'name': 'Units',
'type': 'numeric',
'format': Format(group=',',precision=1,scheme=Scheme.fixed)
},
{
'id': 'Price',
'name': 'Price',
'type': 'numeric',
'format': Format(precision=2,scheme=Scheme.fixed,symbol='$', group=',')
},
{
'id': 'Amount',
'name': 'Transaction Value',
'type': 'numeric',
'format': Format(precision=2,group=',',scheme=Scheme.fixed,symbol='$')
}
],
style_table={
'maxHeight': '100%',
'width': '90%',
'margin': '0 auto',
},
style_as_list_view=True,
style_cell={
'fontFamily': 'Arial',
'textAlign': 'left',
'height': '60px',
'padding': '2px 22px',
'whiteSpace': 'inherit',
'overflow': 'hidden',
'textOverflow': 'ellipsis',
'font_size': '12px'
},
style_cell_conditional=[
{
'if': {'column_id': 'Trade_Date'},
'textAlign': 'left',
'width': '150px'
},
{
'if': {'column_id': 'Account'},
'textAlign': 'left',
'width': '200px'
}
],
style_header={
'fontWeight': 'bold',
'backgroundColor': 'white',
},
style_data_conditional=[
{
'if': {
'filter_query': '{Transaction_Type} eq "Sale"',
},
'color': 'red',
'backgroundColor': 'rgb(248,216,212)'
},
{
'if': {
'filter_query': '{Transaction_Type} eq "Dividend"',
},
'backgroundColor': 'rgb(217,217,217)'
}
]
),
html.Br(),
html.Br(),
html.Br()
],
)
])
#print(df[df == value])
@app3.callback(
Output('table', 'data'),
[Input('ticker-filter', 'value'),
Input('transaction-type-filter', 'value')])
def update_rows(selected_ticker, selected_transaction_type):
if selected_ticker == [] or selected_ticker == None:
if selected_transaction_type != []:
df1 = df[df.Transaction_Type.isin(selected_transaction_type)]
return df1.to_dict('rows')
else:
return df.to_dict('rows')
if selected_ticker != []:
if selected_transaction_type == [] or selected_transaction_type == None:
df1 = df[df.Symbol_CUSIP.isin(selected_ticker)]
return df1.to_dict('rows')
else:
df1 = df[df.Symbol_CUSIP.isin(selected_ticker)]
df2 = df1[df1.Transaction_Type.isin(selected_transaction_type)]
return df2.to_dict('rows')
@app3.callback(
Output("modal", "is_open"),
[Input("open", "n_clicks"), Input("close", "n_clicks")],
[State("modal", "is_open")],
)
def toggle_modal(n1, n2, is_open):
if n1 or n2:
return not is_open
return is_open
You can see in the picture below: The dash bootstrap css is working on the modal, but also impacting my table (using dash bootstrap fonts and stretching the columns). It is not the divs ‘Filter by Ticker’ or ‘Filter by Transaction Type’.
And this looks perfect - just what I was after and looks easy enough to use - thank you!
