Skip to content
This repository was archived by the owner on Nov 28, 2023. It is now read-only.

Chart uses bootstrap grid incorrectly, causing permanent horizontal scrollbar #36

Open
chriswilty opened this issue Feb 16, 2021 · 0 comments

Comments

@chriswilty
Copy link

I realise you are only using chart.html as a URL, but I cannot find the source repo for that, so I am reporting this issue here; feel free to point me in the correct direction.

The OF Chart component renders with a permanent horizontal scrollbar, because it is misusing Bootstrap Grid layout, nesting a row within a row. Bootstrap rows have negative margins to counteract the padding on child columns, so nesting a row within a row leads to a double negative margin, thus as the SVG chart has width: 100% it will always overflow its bounds.

The solution is to use columns within rows, in this case, one full-width column for the chart, and another for the jumbotron.

image

Might seem like a small issue, but this chart seems to be widely used in tutorials and seed projects, and it's not a good look.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant