Sign in to follow this  
jvl

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

Recommended Posts

Hi,

 

Add this line

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

 

to your fiddle here:

http://jsfiddle.net/fusioncharts/x5FBh/

 

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".

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this