Dash column alignment (sidebar + header)

Dash Python
1

Hello Dashers,

I am making a demo site using dash bootstrap components and I have a problem regarding the columns’ alignment: I cannot expand my header to the full width of the window of browser. It will expand to like 3/5 of the full-width length. I want to expand the header to the full-width length of the browser window so that user pic and name stick to the right-end of the screen.

Here is a capture of the demo site.

Dashboard
Dashboard1917×972 23.3 KB

The site has one sidebar and one header.

The sidebar works perfectly fine. The problem is the header.

In the header there is a row. In this row, I want to display three different things so I made three columns.

The 3 columns contain each:

  • A Title,
  • in the rightend, a picture of the user,
  • right next to the picture, user name and property below the name

with my code below,

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc

from dash.dependencies import Input, Output, State
from numpy import size

from modules import static

header_bar = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.H3("Title", id='page-title', className='card-title'),
                        html.P("This is a subtitle.", id='page-subtitle', className='card-subtitle text-muted')
                    ],
                    width = {"size": 6, "order": 'start'}
                ),
                dbc.Col(
                    [
                        html.Img(src=static.USER, id='user', width=40, height=40)
                    ],
                    width = {"size": 1, "order": 11},
                ),
                dbc.Col(
                    [
                        html.P(["Marco You", html.Br(), html.P("Admin", className="text-muted")])
                    ],
                    width = {"size": 2, "order": 12},
                    className="text-left"
                )
            ]
        )
    ],
    style= static.HEADER_STYLE,
    className = "container-fluid w-100"
)

# To help you, static.HEADER_STYLE looks like:
import dash_bootstrap_components as dbc

LOGO = "assets/img/logo_light_theme.png"
USER = "assets/img/user.png"

THEMES = dbc.themes.FLATLY

header_height, footer_height = "6rem", "10rem"
sidebar_width, adbar_width = "12rem", "12rem"
sidebar_margin_top = "1rem"
sidebar_margin_left = "1rem"
content_margin_left, content_margin_right = "17rem", "1rem"

HEADER_STYLE = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "margin-top": sidebar_margin_top,
    "margin-left": content_margin_left,
    "margin-right": content_margin_right,
    "width": "Full Width",
    "height": header_height,
    "padding": "2rem 1rem",
    "background-color": "white"
}

So far I have tried:

  • Adding more columns in a row → allows expanding like 15% more than in the capture pic but that’s the max (also code becomes messy)
  • Increasing the width size of each column → the last column ends up coming below the first column after exceeding the given limited width
  • Ordering using integers → doesn’t change anything
  • Using className = “float-right” to the dbc.Row() → doesn’t do anything

I hope to find an answer here. I am a newbie in coding in general but any solution is welcome. And eventually, I would appreciate it a lot if you can tell me how to tighten the margin between the image and user name.

Thanks!