Body dir="rtl" with a chart makes the page too wide

jvl · October 22, 2015

Hi,

Add this line

document.getElementsByTagName('body')[0].setAttribute("dir", "rtl");

to your fiddle here:

and you will get a huge scrollbar on the frame. It is caused by this element ".fusioncharts-smartlabel-container" and specifically this rule "left: -9999em".

AshokKumaresan · October 28, 2015

Hi

I guess its the problem with JsFiddle even if you are not including the above line you will get a scroll bar in JsFiddle. Try the same code in normal html page their will be no issue in that.

Thanks,

jvl · November 2, 2015

I ran into this bug in normal use. I am not talking about just having a scroll bar, I am talking about the page being something like 160 000 pixels wide (yes 160k px).

Did you try it in a normal html page with dir="rtl" in the body?

AshokKumaresan · November 3, 2015

Hi,

Yes i tried in normal html page too only change is the chart moves to right side of the screen but the page is not getting wider.

Thanks

jvl · November 9, 2015

For me with firefox 42.0 (the latest one currently) the chart goes to the right side and I get a scrollbar although there is nothing that would require that scrollbar. I also tried this on another computer and same thing happens.

<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="http://static.fusioncharts.com/code/latest/fusioncharts.js" type="text/javascript"></script>
    <script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js" type="text/javascript"></script>
    <script type="text/javascript">
    FusionCharts.ready(function () {
        var salesChart = new FusionCharts({
            type: 'area2d',
            renderAt: 'chart-container',
            width: '400',
            height: '300',
            dataFormat: 'json',
            dataSource: {
                "chart": {
                	
                },
                "data": [
                    {
                        "label": "Value",
                        "value": "4"
                    }
                ]
            }
        })
        .render();
    });
    </script>
  </head>

  <body dir="rtl">
	<div id="chart-container">FusionCharts will render here</div>
  </body>
</html>

The thing that makes the scrollbar go away is this style

    <style>
    .fusioncharts-smartlabel-container{
    	left: 0px !important;
    }
    </style>

AshokKumaresan · December 2, 2015

Hi

We have logged the issue and we will keep you posted on any updates.

Thanks

Sign In

Body dir="rtl" with a chart makes the page too wide

Recommended Posts

jvl

Share this post

Link to post

Share on other sites

AshokKumaresan

Share this post

Link to post

Share on other sites

jvl

Share this post

Link to post

Share on other sites

AshokKumaresan

Share this post

Link to post

Share on other sites

jvl

Share this post

Link to post

Share on other sites

AshokKumaresan

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity