I notice that the css stored at [https://codepen.io/chriddyp/pen/bWLwgP.css] relies upon a skeleton style gird layout. I have been trying implement a classic display:grid layout with only partial success.
Is this type of css display supported?
Ian
I notice that the css stored at [https://codepen.io/chriddyp/pen/bWLwgP.css] relies upon a skeleton style gird layout. I have been trying implement a classic display:grid layout with only partial success.
Is this type of css display supported?
Ian
Dash apps result in regular HTML elements that can be styled however you want. So for the most part, if you can do it with HTML/CSS, you can achieve it within Dash.
Hi @nedned ,
I attach a Dash example and a codepen example which give different outputs.
It looks like the display:grid format does not respect the grid tracks or span properly.
Dash Code
import dash
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div(
className = ‘wrapper’,
children=[
html.Div(html.H1(
className=‘header-left’,
children=‘LEFT’
),),
html.Div(html.H2(
className=‘header-middle’,
children =‘MIDDLE’,
),),
html.Div(html.H1(
className = ‘header-right’,
children = ‘RIGHT’
),),
],
)
app.css.append_css({
‘external_url’: ‘http://127.0.0.1:8000/test-css.css’}) # locally served css file
if name == ‘main’:
app.run_server(debug=True)
test-css.css
.wrapper {
display: grid;
grid-template-columns: 20vw 12vw 32vw 32vw;
grid-template-rows: 12% 7% 58% 7%;
grid-gap: 4px;
border: 2px dashed rgba(114, 186, 94, 0.35);
}
.header-left {
grid-column: 1/3;
grid-row: 1/2;
border: 2px dashed rgba(114, 186, 94, 0.35);
text-align: left;
}
.header-middle {
grid-column: 3/4;
grid-row: 1/2;
border: 2px dashed rgba(114, 186, 94, 0.35);
text-align:center;
}
.header-right {
grid-column: 4/5;
grid-row: 1/2;
border: 2px dashed rgba(114, 186, 94, 0.35);
justify-content: end;
text-align:right;
}
Dash doesn’t intercept CSS or HTML at all. I recommend using your browser’s devtools and inspecting the HTML elements one by one to see what the differences between the versions are. Look at the rendered markup and at the inherited CSS properties.