Text display inside gauge with firefox

[atefBB]

I'm using ng-gauge on firefox (v53.0 (32 bits) Win7), the text inside the gauge is displayed correctly on chrome but with firefox the text is displayed outside the gauge. my HTML code is: <ng-gauge size="150" type="full" thick="5" value="some_data" cap="round" label="text here" foreground-color="#0095c8" background-color="#c8c7cc" duration="1000" append="%"></ng-gauge> the displayed gauge here:

[ashish-chopra]

Hi Atef,

Before getting into the internals of your problem, i tried opening the official website of angular-gauge (https://ashish-chopra.github.io/angular-gauge) in firefox (53.0) win7 and the gauges are rendered perfectly fine. Checkout the screenshot below:

However, i will try to reproduce the problem that you have arrived at, meanwhile just open this site in firefox at your end and confirm the results. If everything seems okay, i suspect some internal CSS of your app is overriding the default CSS of the angular-gauge.

Regards Ashish

[atefBB]

thanks @ashish-chopra! the gauges are rendered perfectly in the official website! but in my 'testing' website they aren't!

[ashish-chopra]

Hi @atefBB ,

Which version of angular-gauge library are you using in your project? If possible can you share some code like HTML showing ng-gauge wrapped in some parent divs and related CSS?

You can email me the code if it is private/protected - sendtoashishchopra@gmail.com

Regards Ashish

[ashish-chopra]

Hi @atefBB,

I am able to reproduce your problem on angularjs-gauge v1.1.1. It seems that it is broken in Firefox. But all the latest versions, 1.2.0 or 1.3.0 is working fine in firefox. Can you please upgrade your installation to new version.

Change the version in package.json to 1.3.0 and run npm install. To make sure you get the latest, check the package.json file in node_modules/angularjs-gauge folder.

Let me know if the problem still persists.

Thanks Ashish

[ashish-chopra]

In your source code of angularjs-gauge.js (or minified), whatever you are using. Change the highlighed code to as mentioned below and then let me know if you experience the same issue again?

display:inline-block;

Make sure you reload the browser window so that fresh file is downloaded to test.

Cheers Ashish

[atefBB]

Thanks M. Ashish. I'm not at work now, and I'll try your recommendation and see the result soooooon !

[atefBB]

Peeeeeeeeeeeerfect! after adding display:inline-block; in the angularjs-gauge.js file it rendered perfectly now (in firefox & chrome also). Thanks!

[ashish-chopra]

Great, @atefBB

I found that this bug exists in latest version also. I will release 1.3.1 with bug fix shortly.

Thanks Ashish

[ashish-chopra]

Hey @atefBB ,

I have just released the latest version 1.3.1 including the fix. You can update your package.json.

Cheers Ashish

[atefBB]

Thaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanks M. @ashish-chopra ! I'll do (In shaa Allah) !

[ashish-chopra]

Shukriya :+1: