Bug sizing cards

Dash Python
,
1

Link

Hello, I have a question! As I can make the dashboard upon receiving a refresh the cards stay the same size.

Function that receives the variables value and title

    new_figure_card1 = update_card_string(cada_populacao_municipio, "POP. VACINÁVEL<br>(>= 12 ANOS)")
    new_figure_card2 = update_card_string(total_doses_aplicadas, "TOTAL DOSES <br> APLICADAS")
    new_figure_card3 = update_card_porcentagem(porcentagem_aplicada, "COBERTURA (%)")
    new_figure_card4 = update_card_string(populacaototal_municipio_sc, "POPULAÇÃO <br> TOTAL")

Code for Card Receive String

def update_card_porcentagem(value, title):
    titulo = f"<span style='font-size:14px; font-weight:bold'><b>{title}</b></span>"
    valores = f"{titulo}<br><span style='font-size:27px'>{value:.2f}%</span>"

    card_layout = go.Layout(
        title="",  # Remova o título do indicador
        paper_bgcolor="#f8f9fa",  # Define a cor de fundo do interior do card como transparente
        plot_bgcolor="#f8f9fa",  # Define a cor de fundo do gráfico como transparente
        #margin={'l': 1, 't': 1, 'b': 2, 'r': 1},
        height=85,
        xaxis={'visible': False},  # Remove a escala numérica do eixo x
        yaxis={'visible': False},   # Remove a escala numérica do eixo y
        annotations=[{
            'x': 0.5,  # Define a posição horizontal do texto no cartão (no meio)
            'y': 0.5,  # Define a posição vertical do texto no cartão (no meio)
            'xref': 'paper',
            'yref': 'paper',
            'text': valores,  # Adiciona o texto combinado como anotação
            'showarrow': False,  # Não mostra a seta de indicação
            'font': {'size': 19},  # Define o tamanho da fonte da anotação para os valores
            'align': 'center',  # Alinha o texto ao centro
        }]
    )

    return go.Figure(layout=card_layout)

Code for Card Receive String

def update_card_string(value, title):
    titulo = f"<span style='font-size:14px; font-weight:bold'><b>{title}</b></span>"
    valores = f"{titulo}<br><span style='font-size:27px'>{value}</span>"

    card_layout = go.Layout(
        title="",  # Remova o título do indicador
        paper_bgcolor="#f8f9fa",  # Define a cor de fundo do interior do card como transparente
        plot_bgcolor="#f8f9fa",  # Define a cor de fundo do gráfico como transparente
        #margin={'l': 1, 't': 1, 'b': 2, 'r': 1},
        height=85,
        xaxis={'visible': False},  # Remove a escala numérica do eixo x
        yaxis={'visible': False},   # Remove a escala numérica do eixo y
        annotations=[{
            'x': 0.5,  # Define a posição horizontal do texto no cartão (no meio)
            'y': 0.5,  # Define a posição vertical do texto no cartão (no meio)
            'xref': 'paper',
            'yref': 'paper',
            'text': valores,  # Adiciona o texto combinado como anotação
            'showarrow': False,  # Não mostra a seta de indicação
            'font': {'size': 19},  # Define o tamanho da fonte da anotação para os valores
            'align': 'center',  # Alinha o texto ao centro
        }]
    )

    return go.Figure(layout=card_layout)

Row of cards

    dbc.Row([
        dbc.Col([
            dbc.Card(
                dbc.CardBody([

                ]),
                style={'border': 0}
            )
        ],sm=2, lg=2),

        dbc.Col([
            dbc.Card(
                dbc.CardBody([
                    dcc.Graph(id='card1-municipio', config={"displayModeBar": False}),
                ]),
                style={'backgroundColor': '#f8f9fa'}
            ),
        ],sm=2, lg=2),
        dbc.Col([
            dbc.Card(
                dbc.CardBody(
                    dcc.Graph(id='card2-municipio', config={"displayModeBar": False}),
                ),
                style={'backgroundColor': '#f8f9fa'}
            ),
        ],sm=2, lg=2),
        dbc.Col([
            dbc.Card(
                dbc.CardBody(
                    dcc.Graph(id='card3-municipio', config={"displayModeBar": False}),
                ),
                style={'backgroundColor': '#f8f9fa'}
            ),
        ],sm=2, lg=2),
        dbc.Col([
            dbc.Card(
                dbc.CardBody(
                    dcc.Graph(id='card4-municipio', config={"displayModeBar": False}),
                ),
                style={'backgroundColor': '#f8f9fa'}  # Defina a cor de fundo do card inteiro
            ),
        ],sm=2, lg=2),
    ], style={'width': '100%', 'margin-bottom': '0px'}, className='mt-2'),  # Remover a altura fixa
2

why would they change? Your code has them displaying the same size regardless of screen size, I’d set sm=6 and keep large=2 and adjust that as needed or you can directly change size via the style if column isn’t enough.

3

There is a video at the link that explains better what is happening

4

Maybe i don’t fully understand the question, but all i saw was you click a button then 4 graphs appear with a width of 2, you could increase the column size on sm and lg to better fit the screen. I don’t understand what the first column is doing:

dbc.Col([
            dbc.Card(
                dbc.CardBody([

                ]),
                style={'border': 0}
            )
        ],sm=2, lg=2),

I would remove that and increase the remainder to sm=3, lg=3 for all the other dbc.Col

5

The first column is to leave a blank space for cards to appear from the second column

As picture

Captura de tela 2024-07-24 150153
Captura de tela 2024-07-24 1501531898×386 37.9 KB

6

I’d remove it and wrap the remainder in a dbc.Container and style it to center and set the dbc.Col as a column width of 3 to make them larger

7

At the beginning of my post there is a link that shows a video, when the dash receives a refresh the cards increase in size.

Captura de tela 2024-07-24 150645
Captura de tela 2024-07-24 1506451398×542 109 KB