CODEWITHSUNDEEP
cssgoogle-visualization
Matt
Matt

Reputation: 95

Google Chart in div with overflow-x: scroll results in large scroll area

JSFiddle here.

I have multiple Google Charts that I wrap in a div container with overflow-x: scroll so that on smaller screens users can scroll to see the full chart.

However, the scroll area becomes very large (see JSFiddle) with a lot of white space. I have tried setting the width of the actual chart div (chart in this example) to no avail.

Edit:

Here's some code, the div charts contains the Google charts.

<div id="charts">
<div id="chart"></div>
</div>

And the CSS: 

#charts {
direction: rtl;
overflow-x: scroll;
overflow-y: hidden;
}

Upvotes: 1

Views: 1259

Answers (2)

Alejalapeno
Alejalapeno

Reputation: 1008

#chart has a div element grandchild for holding tabular chart data with position: absolute; left: -10000px; on it that's creating the white space. Normally this wouldn't matter and the graph uses the property to hide the element off screen but direction: rtl changes the box model orientation.

#chart div div {
    overflow: hidden;
}

or target the element and switch left to right:

[aria-label="A tabular representation of the data in the chart."] {
    left: auto !important;
    right: -10000px;
}

Upvotes: 1

Matt
Matt

Reputation: 95

Did some further reading and it appears that this is a known issue / bug (see here)

Upon inspecting the elements, there is a hidden child div dir="ltr" property. I added the following to my CSS:

div[dir="ltr"] {
overflow: hidden;
}

And the issue is gone. When viewing the chart on a large enough display, the horizontal scrolls bars disappear, however, on a smaller display, the scroll bars appear but are limited to the width of the chart.

Upvotes: 0

Related Questions