As you can see from the snapshot above, I’m having issues trying to get the cardgroup component to occupy the entire width of the browser window. I’m also not able to restrict the dash table to exist within the card. Here is my code:
card_facility=dbc.Card(
dbc.CardBody(
[
html.H4('Facility Info',className='card-title'),
html.H6('Input details such as customer name, facility location, facility type etc.',className='card-subtitle'),
html.Div([
html.H5('Customer Name',style={'display':'inline-block','margin-right':'20px'}),
dcc.Input(id='customer-name',type='text',placeholder='', style={'display':'inline-block'}), #'border': '1px solid black'
]),
html.Div([
html.H5('Site Name', style= {'display':'inline-block','margin-right':'73px', 'margin-top':0}),
dcc.Input(id='site-name',type='text',placeholder='', style={'display':'inline-block'}),
]),
html.Div([
html.H5('Zipcode',style={'display':'inline-block','margin-right':'92px'}),
dcc.Input(id='zip-code',type='text',placeholder='', style={'display':'inline-block'}),
]),
html.Div([
html.H5('Facility Type',style={'display':'inline-block','margin-right':'50px'}),
dcc.Dropdown(id='facility',
options=[{'label':'Unknown','value':''},
{'label':'Refrigerated Warehouse/Cold Storage','value':'Cold Storage'},
{'label':'Office','value':'Office'},
{'label':'School','value':'School'},
{'label':'Grocery Store/Supermarket','value':'Grocery Store/Supermarket'},
{'label':'Community Centre','value':'Community Centre'},
{'label':'Higher Education Campus','value':'Higher Education Campus'},
{'label':'Distribution Center','value':'Distribution Center'},
{'label':'Hotel','value':'Hotel'},
{'label':'Manufacturing','value':'Manufacturing'},
{'label':'Multi-family Building','value':'Multi-family Building'},
{'label':'Corporate Campus','value':'Corporate Campus'},
{'label':'Warehouse','value':'Warehouse'},
{'label':'Food & Beverage','value':'Food & Beverage'},
{'label':'Hospital','value':'Hospital'},
{'label':'Outpatient Healthcare','value':'Outpatient Healthcare'},
{'label':'EV Charging Station','value':'EV Charging Station'},
{'label':'Water Treatment Plant','value':'Water Treatment Plant'},
{'label':'Data Center','value':'Data Center'},
{'label':'Greenhouse','value':'Greenhouse'},
{'label':'Indoor Ag','value':'Indoor Ag'},
{'label':'Other','value':'Other'}],
value='',
style={'display':'inline-block','width':'400px','margin-bottom':'-10px'}
)]),
html.Div([
html.H4('Facility Load Info'),
html.H6('Input details such as data unit, data frequency'),
html.Div([
html.H6('Unit of the data',style={'display':'inline-block','margin-right':'151px'}),
dcc.RadioItems(
id='units',
options=[{'label':'kWh','value':'kwh'},
{'label':'kW','value':'kw'}],
value='kwh',
labelStyle={'display':'inline-block','padding-right':'10px','font-size':'15px'},
style={'display':'inline-block'}
)
],style={'display':'inline-block'}),
html.Div([
html.H6('Interval of uploaded demand data', style={'display':'inline-block','margin-right':'25px'}),
dcc.RadioItems(
id='intervals',
options=[{'label':'15 minutes','value':15},
{'label':'30 minutes','value':30},
{'label':'Hourly','value':60}],
value=60,
labelStyle={'display':'inline-block','padding-right':'10px'},
style={'display':'inline-block'}
),
html.P('Note: Indicate the interval format of the source data you are uploading.',style={'padding-bottom':'-10px'},className='card-text'),
]),
html.Div([
html.H6('Convert into other intervals?', style={'display':'inline-block','margin-right':'58px'}),
dcc.RadioItems(
id='conversion',
options=[{'label':'Yes','value':'y'},
{'label':'No','value':'n'}],
value='n',
labelStyle={'display':'inline-block','padding-right':'10px'},
style={'display':'inline-block'}
)
]),
html.P(['Note: The default selection is No and the output data remains in the same interval format as the uploaded data.',
html.Br(), 'You have the choice to convert the uploaded data to other interval formats.'],className='card-text'),
html.Div(
id='15-30-conv',
children=[
html.H6('Convert into which interval format?',style={'display':'inline-block','padding-right':'13px'}),
dcc.RadioItems(
id='15-30-bck-cnv',
options=[{'label':'15 minute intervals','value':15},
{'label':'30 minute intervals','value':30}],
value=15,
labelStyle={'display':'inline-block','padding-right':'10px'},
style={'display':'inline-block'}
)],
style={'display':'none'}
),
html.Div(
id='hourly-conv',
children=[
html.H6('Convert into which interval format?',style={'display':'inline-block','padding-right':'13px'}),
dcc.RadioItems(
id='hourly-btn',
options=[{'label':'Hourly intervals','value':60}],
value=60,
labelStyle={'display':'inline-block','padding-right':'10px'},
style={'display':'inline-block'}
)],
style={'display':'none'}
)
],style={'padding-top':'25px'}),
html.Div([
html.H4('Input Data Upload'),
dcc.Upload(
id='upload-data',
children=html.Div([
'Drag and Drop or ',
html.A('Select Files')
]),
style={
'width': 'auto',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '0 auto'
},
# Allow multiple files to be uploaded
multiple=True
),
html.P('Note: Make sure the interval data file you are uploading is a CSV file with two columns with headers: Date and Demand (Capital D).',
style={'margin-top':'20px','textAlign':'center'})
],style={'padding-top':'25px'}),
html.Div(id='status',style={'textAlign':'center'})
])
)
# card_inputs=dbc.Card(
# dbc.CardBody([
# ])
# )
card_summ=dbc.Card(
dbc.CardBody([
dcc.Store(id='data-storer'),
dcc.Store(id='nan-vals'),
html.Div(children=[
dash_table.DataTable(id='summary',
columns=[{'name':'No. of Estimated values','id':'1'},
{'name':'Values estimated (%)','id':'2'},
{'name':'Min. Load (kW)','id':'3'},
{'name':'Max. Load (kW)','id':'4'},
{'name':'Avg.load (kW)','id':'5'},
{'name':'Annual Consumption (kWh)','id':'6'},
{'name':'Load Factor','id':'7'}],
style_header={'backgroundColor': 'rgb(30, 30, 30)'},
style_cell={'backgroundColor': 'rgb(50, 50, 50)','color': 'white'}
)
],style={'padding-bottom':'10px','width':'auto'}), #id='summary',
html.Button('Download',id='btn'),
Download(id='clean-load'),
]),
)
app.layout=html.Div([
dbc.CardGroup([card_facility,card_summ],style={'width':'auto'}),
])