Jestem pewien, że to coś bardzo prostego, ale staram się utworzyć pulpit nawigacyjny w panelu python. Nie mam doświadczenia w pracy z dash lub html. Udało mi się utworzyć pola div w potrzebnym mi układzie, ale gdy dodaję nagłówek w jednym z div, jest całkowicie niszczy mój układ (patrz Załączone zdjęcia). Może ktoś proszę mi pomóc zrozumieć, gdzie popełniłem błąd?
import dash
from dash import dcc
from dash import html
import pandas as pd
from dash.dependencies import Input, Output, State
app = dash.Dash()
app.layout = html.Div(
[
html.H1(
children="ML Dashboard",
className="main_title",
style={
"color": "black",
"text-align": "center"
},
),
html.Div(
[
html.Div(
[
],
style={
"background-color": "#096484",
"height": "5vh",
"width": "20vw",
"margin-left": "9vw",
}
),
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "39vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
html.Div(
[
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "26vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
html.Div(
[
html.Div(
[
],
style={
"background-color": "#4796B3",
"height": "40vh",
"width": "24vw",
"margin-left": "1vw",
"margin-top": "3vh"
}
),
html.Div(
[
],
style={
"background-color": "#4796B3",
"height": "40vh",
"width": "24vw",
"margin-left": "1vw",
"margin-top": "1.5vh"
}
),
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "26vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
],
style={
"background-color": "#52ACCC",
"height": "95vh",
"width": "95vw",
"margin-left": "2vw"
}
)
if __name__ == '__main__':
app.run_server(host='0.0.0.0', port=8080, debug=True)
import dash
from dash import dcc
from dash import html
import pandas as pd
from dash.dependencies import Input, Output, State
app = dash.Dash()
app.layout = html.Div(
[
html.H1(
children="ML Dashboard",
className="main_title",
style={
"color": "black",
"text-align": "center"
},
),
html.Div(
[
html.Div(
[
html.H1(
children="PIPELINE",
className="title_1",
style={
"color": "white",
"text-align": "center"
},
),
],
style={
"background-color": "#096484",
"height": "5vh",
"width": "20vw",
"margin-left": "9vw",
}
),
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "39vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
html.Div(
[
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "26vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
html.Div(
[
html.Div(
[
],
style={
"background-color": "#4796B3",
"height": "40vh",
"width": "24vw",
"margin-left": "1vw",
"margin-top": "3vh"
}
),
html.Div(
[
],
style={
"background-color": "#4796B3",
"height": "40vh",
"width": "24vw",
"margin-left": "1vw",
"margin-top": "1.5vh"
}
),
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "26vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
],
style={
"background-color": "#52ACCC",
"height": "95vh",
"width": "95vw",
"margin-left": "2vw"
}
)
if __name__ == '__main__':
app.run_server(host='0.0.0.0', port=8080, debug=True)