Hey! I was trying to build out my first dash page and ran into a problem with the NavBar formatting with other elements in the page. I was wondering if anyone had any advice on how I could fix this since I am completely at a loss on it! Im sure it’s something silly and simple but this being my first time using this tool and having spent several hours googling and toying with it to no avail I figured I’d ask to see if anyone had any advice!
I attached below an image of what the navbar renders as on the webpage and the portion of code I am using to generate the page! Please let me know if I can provide anything else if it will help ya give me some advice!
app.layout = html.Div(children=[
html.Div(
className='row',
children=[
html.Div(
className='twelve columns',
children=[
dbc.Nav([
dbc.NavItem(dbc.NavLink("Active", active=True, href="#")),
dbc.NavItem(dbc.NavLink("A link", href="#")),
dbc.NavItem(dbc.NavLink("Another link", href="#")),
dbc.NavItem(dbc.NavLink("Disabled", disabled=True, href="#")),
],
pills=True,
)
]
)
]
),
# html.Div(children=[
# html.Nav(className = "nav nav-pills", children=[
# html.A('App1', className="nav-item nav-link btn", href='/apps/App1'),
# html.A('App2', className="nav-item nav-link active btn", href='/apps/App2')
# ]),
# ]),
html.H2("File List"),
html.Ul(id="file-list"),
html.Ul(id="header-list"),
html.Div(
className="row",
children=[
# Dropdown to chose a provider
html.Div(
className="two columns",
children=[
html.Div(
dcc.Dropdown(id='name-dropdown', multi=False),
style={
'height': '100%',
'width': '115%',
'font-size': "100%",
'min-height': '1px',
"lineHeight": "255%",
},
),
]
),
# Date selector component
html.Div(
className="four columns",
children=[
html.Div(
dcc.DatePickerRange(
id='date-picker-range',
start_date_placeholder_text="Start Period",
end_date_placeholder_text="End Period",
), style={
# "width": "125%",
# "textAlign": "center",
# "borderStyle": "solid",
"margin": "0px",
},
)
]
),
# Search Button
html.Div(
className="two columns",
children=[
html.Div(
html.Button('Search!', id='my-button1', style={
"width": "100%",
"textAlign": "center",
"borderStyle": "solid",
"margin": "0px",
},)
)
]
),
# Refresh Button Componenet
html.Div(
className="two columns",
children=[
html.Div(
html.Button('Refresh!', id='my-button', style={
"width": "100%",
"textAlign": "center",
"borderStyle": "solid",
"margin": "0px",
},)
)
]
),
# File Upload Component
html.Div(
className="two columns",
children=[
dcc.Upload(
id="upload-data",
children=html.Div(
["Upload File"]
),
style={
"width": "100%",
"lineHeight": "245%",
"borderWidth": "1px",
"borderStyle": "dashed",
"borderRadius": "5px",
"textAlign": "center",
"margin": "0px",
},
multiple=True,
)
]
),
]
),
html.Hr(),
html.Div(id='display-selected-values'),
dash_table.DataTable(
id='table',
# columns=[{"name": i, "id": i} for i in df.columns],
# data=df.to_dict('records'),
style_table={'overflowX': 'scroll'},
)
])
