Is there a way to set column width as a percentage instead of an int? Or just stacking dbc.Card(s)? I am trying to get to this layout
I recently answered a similar question. You just need to define a few css classes and then include the css class in dbc.Col(children, class_name='small-card')
.
Thank you, it was my question and that worked like magic with cards, but I need them stacked. So my understanding is that I have put two cards in the left column and one in the right one. I tried changing the Column width with a css class but it didn’t take. Works on a card but not on a column
I’m not 100% sure why dbc.Col
doesn’t like getting a CSS property. A simple solution is to just replace those with html.Div
components. If I ever come across why this is happening, I’ll make sure to update the solution appropriately.
# package imports
from dash import Dash, html
import dash_bootstrap_components as dbc
app = Dash(
__name__,
external_stylesheets=[dbc.themes.BOOTSTRAP]
)
app.layout = dbc.Container([
dbc.Row(
[
html.Div(
[
dbc.Card('Card1'),
dbc.Card('Card2'),
],
className='small-col'
),
html.Div(
[
dbc.Card('Card3')
],
className='large-col'
)
]
)
])
if __name__ == '__main__':
app.run_server(debug=True)
And in assets/styles.css
use the following:
.small-col {
width: 20%;
}
.large-col {
width: 80%;
}
Perfect, thank you! That’s what I ended up doing, I wanted a fully dbc. solution, but I guess that is not feasible.