Vyhľadajte odpoveď

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Text Out of alignment (with GaugeMeter.js)

  • 8 odpovedí
  • 1 má tento problém
  • 19 zobrazení
  • Posledná odpoveď od yongseong.liew

more options

I have a website that uses GaugeMeter.js component. The text of the gauges are out of alignment (as shown in the screenshot) -- which never the case when it is opened with Chrome Browser (i.e. always centered and within the circle/arc).

Strangely, sometime it works well when I started to change the Firefox window width (it is a responsive page).

Anyone came across this? Any idea to solve this?

Priložené obrázky

Vybrané riešenie

The problem appears to be caused by this rule:

.GaugeMeter {
  display: inline;
}


Why is that needed? You could try using inline-block or using the default (block).

Čítať túto odpoveď v kontexte 👍 0

Všetky odpovede (8)

more options

Check your zoom controls.

<Control> (Mac=<Command>) + (plus) enlarge - (minus) reduce 0 (zero) restore

Pomohla vám táto odpoveď?

more options

Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?

Pomohla vám táto odpoveď?

more options

yongseong.liew said

Strangely, sometime it works well when I started to change the Firefox window width (it is a responsive page).

Probably you have an event handler tied to the resize event. If you call that handler after page load, does that have any effect on the problem?

Pomohla vám táto odpoveď?

more options

cor-el said

Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?

Zipped an offline version which the static page shows the same "out of alignment" issue when viewed in Firefox.

Download link: [https://demo-site.signoff.live/firefo.../firefox-rendering-issue.zip]

Upravil(a) yongseong.liew dňa

Pomohla vám táto odpoveď?

more options

cor-el said

Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?

Zipped an offline copy and the static page shows the same issue when viewed offline using Firefox.

Download link: https://demo-site.signoff.live/firefox-rendering-issue.zip

Upravil(a) yongseong.liew dňa

Pomohla vám táto odpoveď?

more options

cor-el said

Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?

Zipped an offline copy and the static page shows the same issue when viewed offline using Firefox.

Download link: https://demo-site.signoff.live/firefox-rendering-issue.zip

Pomohla vám táto odpoveď?

more options

Vybrané riešenie

The problem appears to be caused by this rule:

.GaugeMeter {
  display: inline;
}


Why is that needed? You could try using inline-block or using the default (block).

Pomohla vám táto odpoveď?

more options

jscher2000 said

The problem appears to be caused by this rule: .GaugeMeter { display: inline; }
Why is that needed? You could try using inline-block or using the default (block).

It comes as the default CSS from the GaugeMeter.js library sample.

Indeed, removing that solves the problem.

It is interesting that Chrome/Safari (Webkit) treats that line differently and never show similar behavior.

Pomohla vám táto odpoveď?

Položiť otázku

Ak chcete pridať odpoveď, musíte sa prihlásiť k svojmu účtu. Ak účet doteraz nemáte, položte novú otázku.