css code to remove the unnecessary white space

Question

When horizontal scrolling is kept by default from right hand side to left hand side, i noticed a white space on the left hand side which is to be removed. Issue is could not able to remove the white space shown on the left hand side when scrolling from right to left side. Any suggestions would be helpful.

Demo link : http://jsfiddle.net/3xa69njt/

 google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Adult', 'Child','Infant', 'Senior'], ['2004', 11, 14, 2, 9], ['2005', 12, 14, 2, 9], ['2004', 13, 14, 2, 9], ['2005', 14, 14, 2, 9], ['2004', 15, 14, 2, 9], ['2005', 11, 14, 2, 9], ['2004', 12, 14, 2, 9], ['2005', 13, 14, 2, 9], ['2004', 14, 14, 2, 9], ['2005', 15, 14, 2, 9], ['2004', 11, 14, 2, 9], ['2005', 12, 14, 2, 9], ['2004', 13, 14, 2, 9], ['2005', 14, 14, 2, 9], ['2004', 15, 14, 2, 9], ['2005', 11, 14, 2, 9], ['2004', 12, 14, 2, 9], ['2005', 13, 14, 2, 9], ['2004', 14, 14, 2, 9], ['2005', 15, 14, 2, 9], ['2004', 11, 14, 2, 9], ['2005', 12, 14, 2, 9], ['2004', 13, 14, 2, 9], ['2005', 14, 14, 2, 9] ]); var options = { title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}, width: data.getNumberOfRows() * 130, bar: {groupWidth: 90}, chartArea: {left:60, width:'94%'} }; var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, options); }

#chart_div { overflow-x: auto; overflow-y: hidden; direction:rtl; height:500px; }

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="chart_div"></div>

Tried using margin-left : 0px;left:0px; but of no luck.

--Edited-- As mentioned i want the scrollbar to be scrolled from right to left direction, that is the reason for using direction:rtl.

Do you really need direction: rtl?

Patrick Mlr
– Patrick Mlr

2017-08-28 05:01:28 +00:00
Commented Aug 28, 2017 at 5:01 — Patrick Mlr
– Patrick Mlr, Commented Aug 28, 2017 at 5:01

Asifuzzaman · Accepted Answer · 2017-08-28 04:59:33Z

1

Use display:inline-block; It will remove the space

like below

#chart_div { overflow-x: auto; overflow-y: hidden; direction:rtl; height:500px; display:inline-block; }

Working fiddle

edited Aug 28, 2017 at 4:59

answered Aug 28, 2017 at 4:54

Asifuzzaman

1,7931 gold badge16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Patrick Mlr Over a year ago

Either I don't understand the question or your solution won't work? Maybe you could add overflow: hidden, then it works like expected.

Asifuzzaman Over a year ago

see the fiddle of Op's when the chart loads the horizontal scroll moves to right because of unwanted space at left side . . so I suggested an answer to remove it see the both fiddles you will get it i hope so @PatrickMlr

Nirmal Over a year ago

just try your code with browser it will work. don't know why it is not with js fiddel.. may be some issues with it.

Rahul Kashyap · Accepted Answer · 2017-08-28 05:02:43Z

Just remove direction:rtl; from your CSS code and it will work fine.

here is working jsfiddle http://jsfiddle.net/rhulkashyap/kjwhnx1q/3/

CSS code:

#chart_div { overflow-x: auto; overflow-y: hidden; height: 500px; }

RaJesh RiJo · Accepted Answer · 2017-08-28 05:03:26Z

Am not sure, why do you need direction here. It works fine when removing it.

Here is the fiddle working fine.

Check on this reference to know more about direction property.

 [1]: http://jsfiddle.net/3xa69njt/2/

Masoud Sadeghi · Accepted Answer · 2017-08-28 05:09:03Z

0

<style> #chart_div { overflow-x: auto; overflow-y: hidden; direction: rtl; height: 500px; display: inline-block; margin-left: -20px; } </style>

answered Aug 28, 2017 at 5:09

Masoud Sadeghi

3874 silver badges17 bronze badges

1 Comment

user8440557 Over a year ago

As mentioned i want the scrollbar to be scrolled from right to left direction, that is the reason for using direction:rtl. None of the answers suggested above are working, still i can see the white space on left hand side when moved the scrollbar from right to left side.

Collectives™ on Stack Overflow

css code to remove the unnecessary white space

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Related