Black Lives Matter. Please consider donating to Black Girls Code today.

Generating html for app.layout

Hi there,

I relatively new to python and dash and I’m trying to replicate something that I generated over in R Shiny into Dash. What I’m trying to do is generate a grid of cards that in the end will be controlled by a data frame.

I have this code

html.Div([
    html.Div([
        html.Div([
            html.Div(title, className = 'boxHeader'),
            html.Div('LTD Unique Users', className = 'boxLabel'),
            html.Div('916k', className = 'boxNumbers')
        ], className = 'boxText')
    ], className = 'innerBox' )
], className='cardBox', id= '_'.join(['row', str(r), str(c)]))

which I want to loop through to create the cards, and I can get 1 to generate however it keeps overwritting itself.
Any help would be greatly appreciated.

Thanks
residnt

In that code you’re only creating a single div with class ‘cardBox’. You need to do something like looping over a list of IDs and creating a card for each one. Something like this perhaps:

def make_card(id_name):
    return html.Div([
        html.Div([
            html.Div([
                html.Div(title, className = 'boxHeader'),
                html.Div('LTD Unique Users', className = 'boxLabel'),
                html.Div('916k', className = 'boxNumbers')
            ], className = 'boxText')
        ], className = 'innerBox' )
    ], className='cardBox', id=id_name)

divs = []
for id_name in id_list:
    divs.append(make_card(id_name))

layout = html.Div(divs, className='container')
3 Likes

awesome thank you. I was pretty close once I stepped away from it for a bit. This is what I ended up needing to do

   def gridRow(r, c):
    card = []
    for c in range(1, c + 1):
        card.append(makeCard(r,c))
    return html.Div(card, className = 'row', id = str(r))

def makeCard(r, c):
    return html.Div([
        html.Div([
            html.Div([
                html.Div(title + str(c), className = 'boxHeader'),
                html.Div('LTD Unique Users', className = 'boxLabel'),
                html.Div('916k', className = 'boxNumbers')
            ], className = 'boxText')
        ], className = 'innerBox' )
    ], className = 'cardBox', id= '_'.join(['row', str(r), str(c)]))
    
gridLayout = []
for r in range(1, rws + 1):
    gridLayout.append(gridRow(r, cols))

app.layout = html.Div(gridLayout)

Thanks again

2 Likes

A post was split to a new topic: Using JavaScript to Fire Callbacks