Margins in dbc components

Dash Python
1

Hi everyone!

I am new to dash plotly and i faced a problem with dash bootstrap components.

I’ll give you several examples to specify the problem i faced.

  1. dbc.Navbar

I was trying to create navbar with several buttons (as shown on screenshots in this post on stackoverflow python - How to manage buttons alignment in dash bootstrap component (dbc) navbar element? - Stack Overflow). And The problem was with many divs created automatically with their own styles. So i couldn’t change their styles from inside python backend.

  1. dbc.Modal

Exactly same problem — when i implement any styles to main element, it stands only for this element, but divs inside that element have their own styles.

So my problem is how to set margins to 0 for the elements inside my main element.

But i think, my problem is much bigger then that and could help some new users like me. I couldn’t find any examples how to work with autocreated html components styles.

Thanks for your attantion to my topic. I appretiate any help.

p.s. For more exact understanding i suggest to visit my stackoverflow question or ask me here.

2

Do you have a css page?

3

No i dont. I apply css in “style” parametr from inside python.
like this:

style={"max-width": "none", "width": "90%"}
4

Check out how to add a custom CSS page. That way, you can target the child divs of these classes in CSS

5

that’s a great idea, but i was hoping for explanation like how to do that without refactoring everything and replacing with my own html pages.

6

ok so how exactly should i change css of that div which has me-auto and breaking everything up?

7

I looked at your code from stackoverflow

Give your button container an id; I gave it id = ‘button-container’

CSS:

.navbar-nav{
margin-right: 0 !important;
width: 100%;
}

#button-container{
text-align: end
}

This moves the two buttons to the right side

8

That didn’t help, but i managed to fix it anyway. Big thanks to you for your help.

9

hi @vokiatik
Could you please share with the community how you managed to fix it.

Thank you,