Search code examples
pythonhtmlcssborderplotly-dash

What is causing that white border right after the outermost outline?

got something that is driving me crazy here, please help me!

I've coded some website layout test with Dash in Python and here is code:

app = dash.Dash()

    app.layout = html.Div([
                           html.H2(children="Title",
                           style={'color':'lightgrey',
                                  'background-color': 'black',
                                  'margin-top': '0px',
                                  'margin-bottom': '0px',
                                  'padding-top':'12.5px',
                                  'padding-bottom':'12.5px',
                                  'padding-left':'10px',
                                  'text-align': 'center'}),
                          
                           html.Div(children=[],
    
                                    style={'widh':'50%', 
                                           'height':'50%',
                                           'border': '10px solid rgb(190, 190, 190)',
                                           'outline': '10px solid rgb(200, 255, 255)',
                                           'margin': '10px 10px 0px 10px',
                                           'padding':'0px 0px 0px 0px',
                                           'background-color': 'green',
                                           'background-size': 'auto'} )],
    
    style = {'widh':'100vw', 
             'height':'100vh',
             'border': '10px solid rgb(255, 255, 255)',
             'outline': '10px solid rgb(200, 200, 255)',
             'outline-offset': '0px',
             'margin': '0px 0px 0px 0px',
             'padding':'0px 0px 0px 0px',
             'background-color': 'lightblue',
             'background-size': 'auto'} 
    )
    
    if __name__ == '__main__':
        app.run_server(debug = True)

This gives me this layout (don't care about colors, its just structure test ^^): Coded layout result image

I have two questions about this:

The main one is: Why is that white border there? The second is: What is causing the size os the page to have some extra space at the bottom? (See the reference below:)

Second question image

Solution

  • Well, first of all, it's a weird but must-follow Dash rule/quirk that all CSS style parameters do not contain hyphens, and instead, you remove the hyphen and then capitalize the next word. So your code should be like this:

    import dash
import dash_daq as daq

from dash import dcc
from dash import html
from dash import no_update

from dash.dependencies import Input
from dash.dependencies import Output


app = dash.Dash()

app.layout = html.Div(
    [
        html.H2(
            children="Title",
            style={
                "color": "lightgrey",
                "backgroundColor": "black",
                "marginTop": "0px",
                "marginBottom": "0px",
                "paddingTop": "12.5px",
                "paddingBottom": "12.5px",
                "paddingLeft": "10px",
                "textAlign": "center",
            },
        ),
        html.Div(
            children=[],
            style={
                "widh": "50%",
                "height": "50%",
                "border": "10px solid rgb(190, 190, 190)",
                "outline": "10px solid rgb(200, 255, 255)",
                "margin": "10px 10px 0px 10px",
                "padding": "0px 0px 0px 0px",
                "backgroundColor": "green",
                "backgroundSize": "auto",
            },
        ),
    ],
    style={
        "widh": "100vw",
        "height": "100vh",
        "border": "10px solid rgb(255, 255, 255)",
        "outline": "10px solid rgb(200, 200, 255)",
        "outlineOffset": "0px",
        "margin": "0px 0px 0px 0px",
        "padding": "0px 0px 0px 0px",
        "backgroundColor": "lightblue",
        "backgroundSize": "auto",
    },
)

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

    You'll see the scrolling problem has gone away. As to the white border, you've styled that yourself with "border": "10px solid rgb(255, 255, 255)"! Does this answer your questions?

    You can use chrome DevTools to inspect elements directly (super helpful must-know tool), as you can see: chrome devtools screenshot

    and that white border could easily be removed by simply eliminating it from your code, which you can preview as well in chrome DevTools by unchecking its box in the style panel, like this:

    white border removed