CODEWITHSUNDEEP
pythoncssbootstrap-4plotly-dash
Ger
Ger

Reputation: 259

Dash shows whitespace between card-border and card-header

In my Dash app I am encountering an issue with the bootstrap cards. In the example below, I have an app using the Flatly stylesheet which consists of only one card.

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(__name__,external_stylesheets=[dbc.themes.FLATLY])

app.layout = dbc.Card([dbc.CardHeader('Test',style={'background':'red'}),dbc.CardBody('blabla')],style={'border-color':'green'})

if __name__ == "__main__":    
    app.run_server(debug=True)

When I run this app (using python app.py in the commandline), the card is initially rendered as expected. Yet when, I zoom in, there seems to be space between the header and the border (which disappears again when I further zoom in). The picture below shows that on the left and right the expected layout, but in the middle there is the white space visible between the card border and the header. This issue occurs in all the browsers that I have tried so far.

My questions are:

enter image description here

Upvotes: 1

Views: 2139

Answers (1)

bas
bas

Reputation: 15432

I don't have a clear explanation on why this behavior happens, but I do have a workaround you could use.

You could use an outline instead of a border. Using an outline instead of a border fixes the problem, because:

Outlines never take up space, as they are drawn outside of an element's content.

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.FLATLY])

app.layout = dbc.Card(
    [
        dbc.CardHeader("Test", style={"background": "red"}),
        dbc.CardBody("blabla"),
    ],
    style={"border": "none", "outline": "solid green"},
)

if __name__ == "__main__":
    app.run_server(debug=True)

Upvotes: 2

Related Questions