css - Google Chart in div with overflow-x: scroll results in large scroll area -
jsfiddle here.
i have multiple google charts wrap in div container overflow-x: scroll
on smaller screens users can scroll see full chart.
however, scroll area becomes large (see jsfiddle) lot of white space. have tried setting width of actual chart div (chart in example) no avail.
edit:
here's code, div charts
contains google charts.
<div id="charts"> <div id="chart"></div> </div>
and css:
#charts { direction: rtl; overflow-x: scroll; overflow-y: hidden; }
#chart
has div element grandchild holding tabular chart data position: absolute; left: -10000px;
on that's creating white space. wouldn't matter , graph uses property hide element off screen direction: rtl
changes box model orientation.
#chart div div { overflow: hidden; }
or target element , switch left
right
:
[aria-label="a tabular representation of data in chart."] { left: auto !important; right: -10000px; }
Comments
Post a Comment