# Bug sizing cards

**URL:** <https://community.plotly.com/t/bug-sizing-cards/86030>\
**Category:** Dash Python\
**Tags:** question, bug-reporter\
**Created:** [July 22, 2024, 9:38pm UTC](https://community.plotly.com/t/bug-sizing-cards/86030 "2024-07-22T21:38:25Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Diogo83](https://avatars.discourse-cdn.com/v4/letter/d/7bcc69/32.png) [@Diogo83](https://community.plotly.com/u/Diogo83)\
**Post date:** [July 22, 2024, 9:38pm UTC](https://community.plotly.com/t/bug-sizing-cards/86030/1 "2024-07-22T21:38:25Z")

</div>

[Link](https://drive.google.com/file/d/1KixBhSI-QLWU28UznoFNURXFvBupTlem/view?usp=drive_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

```auto
    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

```auto
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

```auto
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

```auto
    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

```

---

<div class="post-metadata">

**Author:** ![PipInstallPython](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/pipinstallpython/32/34539_2.png) [@PipInstallPython](https://community.plotly.com/u/PipInstallPython)\
**Post date:** [July 24, 2024, 5:25pm UTC](https://community.plotly.com/t/bug-sizing-cards/86030/2 "2024-07-24T17:25:11Z")

</div>

> [@Diogo83](#):
>
> `sm=2, lg=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.

---

<div class="post-metadata">

**Author:** ![Diogo83](https://avatars.discourse-cdn.com/v4/letter/d/7bcc69/32.png) [@Diogo83](https://community.plotly.com/u/Diogo83)\
**Post date:** [July 24, 2024, 5:51pm UTC](https://community.plotly.com/t/bug-sizing-cards/86030/3 "2024-07-24T17:51:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![PipInstallPython](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/pipinstallpython/32/34539_2.png) [@PipInstallPython](https://community.plotly.com/u/PipInstallPython)\
**Post date:** [July 24, 2024, 5:59pm UTC](https://community.plotly.com/t/bug-sizing-cards/86030/4 "2024-07-24T17:59:16Z")

</div>

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:

```auto
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`

---

<div class="post-metadata">

**Author:** ![Diogo83](https://avatars.discourse-cdn.com/v4/letter/d/7bcc69/32.png) [@Diogo83](https://community.plotly.com/u/Diogo83)\
**Post date:** [July 24, 2024, 6:05pm UTC](https://community.plotly.com/t/bug-sizing-cards/86030/5 "2024-07-24T18:05:02Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/1/3/1355db51822a67b85be5abcacf86036f5e1b9967.png)

---

<div class="post-metadata">

**Author:** ![PipInstallPython](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/pipinstallpython/32/34539_2.png) [@PipInstallPython](https://community.plotly.com/u/PipInstallPython)\
**Post date:** [July 24, 2024, 6:07pm UTC](https://community.plotly.com/t/bug-sizing-cards/86030/6 "2024-07-24T18:07:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Diogo83](https://avatars.discourse-cdn.com/v4/letter/d/7bcc69/32.png) [@Diogo83](https://community.plotly.com/u/Diogo83)\
**Post date:** [July 24, 2024, 6:07pm UTC](https://community.plotly.com/t/bug-sizing-cards/86030/7 "2024-07-24T18:07:48Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/5/5/551b0d4d8d74f4c7ff6bc6751b73215a6162df39.png)