CODEWITHSUNDEEP
javascripthtmlcssangularjsangular-translate
wiherek
wiherek

Reputation: 1923

AngularJS angular-translate button text missing

I am using AngularJS with angular-translate (pascalprecht). I am experiencing an issue, where translated text on a button element doesn't show up, until I scroll the button out of the current view and scroll back in or redraw the page in some other way (like toggling display: none). The translated text is in place though (checking through inspector - chrome dev tools).

This happens on Chrome, I couldn't replicate it on Firefox. Translations are loaded with staticFileLoader (local file). The translation on the element is added this way:

<button class="button large x-wide" type="submit">{{ "SUBMIT" | translate }}</button>

I tried swapping the button element with an anchor ('a') element, but the error persists.

Upvotes: 1

Views: 1649

Answers (1)

wiherek
wiherek

Reputation: 1923

I searched a bit more, and it seems this isn't related to AngularJS, but more to webkit How can I force WebKit to redraw/repaint to propagate style changes?

from the answers listed I tried a few. I didn't want to toggle display: none (that helps though). I tried adding a z-index, but it didn't help.

What did it, was adding an empty style tag after the button:

<button class="button large x-wide" type="submit">{{ "SUBMIT" | translate }}</button>
<style></style>

the translation shows up after a few seconds. This is not optimal, but works.

Upvotes: 1

Related Questions