Dash Bootstrap Components: Hr. horizontal line

Dash Python
1

Hi all,
I have the following code

# -*- coding: utf-8 -*-

# --------- Import libraries -----------
import dash 
from dash import Dash, dcc, html, Input, Output
import pandas as pd
import plotly.express as px 
import dash_bootstrap_components as dbc

# --------------- Define App -------------
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# --------------- Start App Layout ------------------

app.layout = html.Div([
                # first row 
		dbc.Row(dbc.Col(html.Hr(style={'borderWidth': "0.3vh", "width": "100%", "borderColor": "#53917E", "borderStyle":"solid"}),width={'size':10, 'offset':1}),), 

		dbc.Row( # start of second row 
			[ # you have to create a children's array to have more than one column in a row 

				dbc.Col(html.H1("Legislativas 2022 Media Monitor"), width={'size': 6, 'offset':1}), #First Column

				dbc.Col(html.H4("Data from CrowdTangle"), width={'size': 5, 'offset':0}), #Second Column
			], # Close Children of first Row
		), # end of first row  

		dbc.Row(dbc.Col(html.H5("Observing Media Trends"), width={'size':3, 'offset':1}),), # third row

		# fourth row makes horizontal line
		dbc.Row(dbc.Col(html.Hr(style={'borderWidth': "1.3vh", "width": "100%", "borderColor": "#53917E","borderStyle":"solid"}),width={'size':10, 'offset':1}),), 				

	], # Div Array Closes 
) # HTML div closes 

# ------------- Start App --------------

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

This is the beginning of a template for a Dashboard but I ran into something that is quite a weird behaviour:

The color I’ve chosen for the horizontal lines is #53917E. However when I ran the app, the color that is displayed is #D5E3DF

Here is an image with the diference

jgomes_eu color difference image
jgomes_eu color difference image2366Ă—1178 71.1 KB

I’m sure I’m doing something wrong, and any help would be much appreciated, as I can’t figure this one out

Thank you in advance!

2

Hi,

If you want a single solid color to the line, then I believe the best approach is to use backgroundColor instead of border… Would that work in your case?

3

Hi @jlfsjunior,
Using backgroundColor doesn’t work and it returns a different color, and a different color from the one it returned when using bordercolor, from the one I’m declaring, as you can see in the image below.

dash_bootstrap
dash_bootstrap2366Ă—1178 71.1 KB

4

My bad, I didn’t noticed that you were using Bootstrap (even in the title!)…

The issue is that bs sets the opacity to 0.25, so adding opacity: 1 to the style should work in your OP code.

5

@jlfsjunior so you mean adding this?

dbc.Row(dbc.Col(html.Hr(style={'borderWidth': "0.3vh", "width": "100%", "backgroundColor": "#B4E1FF","opacity":"1"}),width={'size':10, 'offset':1}),),
6

Yes, did it work?

7

@jlfsjunior unfortunately not. Nothing changed.

8

@AnnMarieW, do you have any ideas? :slightly_smiling_face:

1 Like
9

Yes… if you inspect the page, it looks like there is some css that sets the opacity that overrides the color.

try adding "opacity": "unset", to the style

1 Like
10

@jlfsjunior thank you, but that also didn’t work.
I made a quick app that just shows the horizontal line and the results are the same:

# -*- coding: utf-8 -*-

# --------- Import libraries -----------
import dash 
from dash import Dash, dcc, html, Input, Output
import pandas as pd
import plotly.express as px 
import dash_bootstrap_components as dbc

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

app.layout = html.Div([
	html.Hr(style={'borderWidth': "5vh", "width": "100%", "backgroundColor": "#AB87FF","opacity": "unset", "opacity":"1"}),
	],
)

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

The same happens if I leave out "opacity":"1"

Any ideas?

11

I added ` “opacity”: “unset”, to the style in your original app and it worked

1 Like
12

@AnnMarieW @jlfsjunior so, apparently I solved the problem with changing backgroundColor to borderColor and taking out "opacity":"1"

html.Hr(style={'borderWidth': "5vh", "width": "100%", "borderColor": "#AB87FF","opacity": "unset"})

This actually works!

Thank you for pointing me into the right direction,

1 Like
13

Or it might be simpler to use a html.Div instead of html.Hr ?

14

For what I have in mind html.Hr works better, I think. This will be my first proper Dashboard where I’m applying what I have been learning in the last months.

Screenshot 2022-02-07 at 21.59.41
Screenshot 2022-02-07 at 21.59.413036Ă—1670 159 KB

3 Likes
15

Glad you found this solution. How did you change the html.Br() separation line color to yellow in this last image? I changed the borderColor to many colors but i only keep getting a white color? Also how did you increase the thickness of this yellow html.Hr() separation line?

16 
dbc.Row(
            dbc.Col(
                html.Hr(
                    style={
                        "borderWidth": "0.5vh",
                        "width": "100%",
                        "borderColor": "#F3DE8A",
                        "opacity": "unset",
                    }
                ),
                width={"size": 10, "offset": 0},
            ),
17

Please find the code here

18

The opacity : "unset" parameter was key to bring my thin wispy barely visible grey line to a prominent line. But For some reasons these borderColor and borderWidth parameters don’t change anything in my html.Hr() separation line!?.

I found this style parameters give the options that I seek:
html.Hr(style={"width": "100%", 'borderTop': '3px solid deepskyblue','borderBottom': '2px solid aqua',"opacity": "unset"})

Reference: How To Style the HR Element with CSS

1 Like