Hi,
I recently transitioned to dash 2.0 from an earlier version and got welcomed by a whole list of bugs. I won’t mention the need to change styling variable names as well as import logic as they are trivial to solve. The problem came with a relatively unwelcome set of formatting. In particular, it would appear now that all of my html.Div inherit from something called .row*> that was never there before.
This change mandates that each div take on 100% of the width of the parent and has completely messed up a lot of my formatting. How do I make it so that my component doesn’t inherit from this? I have tried specifying html div class names as well as attempted styling override in styles.css of the same selector. Nothing seems to work. Any guidance would be much appreciated.
Thanks!
Hi,
I am not a bootstrap expert, but it seems that your html.Div are inside a class="row" block (maybe dbc.Row…?). However, I don’t think the width is inherit from this rule, as it is strikethrough…
If you are not using the bootstrap grid, one alternative would be to replace the grid components to simple html and style the blocks yourself.
Perhaps @AnnMarieW has better suggestions 
…
Hi Jose,
You are right that currently it is struck through, but it is because I manually struck through it using inspect. My html.div does indeed inherit from a dbc.row, is it required that children of dbc.row inherit 100% width from its parent? In fact I don’t believe 100% width was a default of dbc.row. This wasn’t part of dash pre 2.0 so I am a bit surprised. I’ve managed to fix it by manually specifying the width for each child across my divs.
is it required that children of dbc.row inherit 100% width from its parent?
I am not 100% sure about it, but my guess is that bootstrap sets to 100% so by default a div will have the same width as col-12. This should not be a problem if the children of row are all class="col*" (or dbc.Col), which is the expected usage of these classes/components.
Besides, I suspect that the change in behavior is not related to dash, but dash-bootstrap-components, but I might be wrong… Have you updated dbc to v1?
Interesting, thanks I’ll give that a try, you could be right as I originally just wanted to use a simple div to do some more custom formatting work. Perhaps column is now necessary for every row that has more than one element.
I believe I have updated dbc to v1, perhaps that could be the cause of the issue instead given that dash v2 is separate from bootstrap and the .row*> formatting comes from a bootstrap css file.