Angular: Changing font-size using css variables is applying but not reflecting in browser for certain fields

Question

I am using CSS variables for a feature where the user has an option to change the font-size to small, medium or large. So for most of the fields, it's working as expected. But for certain fields, the value is applied but not reflected

:host-context(.mediumFont) {
    --fontSize: 11px;
}
:host-context(.largeFont) {
    --fontSize: 12px;
}
:host-context(.smallFont) {
    --fontSize: 10px;
}

refClassArray: RefClassInterface[] = [
        { class: 'font-small', refClass: 'smallFont' },
        { class: 'font-medium', refClass: 'mediumFont' },
        { class: 'font-large', refClass: 'largeFont' },
    ];
defaultFontSize = 'mediumFont';

changeFontSize(selector: string) {
        this.defaultFontSize = selector;
        let docBody = document.body;
        console.log(document.getElementById(selector));
        docBody.classList.add(selector);
        this.refClassArray.forEach((refClass: RefClassInterface) => {
            if (selector !== refClass.refClass) {
                docBody.classList.remove(refClass.refClass);
                document.querySelector('#' + refClass.refClass).setAttribute('style', 'font-weight: normal;' + 'pointer-events: auto;');
            } else {
                document.querySelector('#' + refClass.refClass).setAttribute('style', 'font-weight:' + 'bold;' + 'pointer-events: none;');
            }
        });
        this.ieStyles.iEfont(selector);
    }

Above is the logic I am using.

The first pic is from the element which is working fine. When I hover over the --font-size, 11px is reflected. The second one is the one where it's not working as expected and when I hover over the --font-size nothing is appearing. And both these elements are inside <body>

Is it possible to reproduce this issue in stackblitz by any chance? — yurzui
– yurzui, Commented Nov 12, 2020 at 14:58

IDK4real · Accepted Answer · 2020-11-12 18:58:22Z

You should not be modifying your html code via direct access. This can open leave your application vulnerable to XSS Attacks for instance.

Instead, the Angular Team recomends the use of the Renderer2.

Taking your code and modifying it to use it, would lead to the following:

refClassArray: RefClassInterface[] = [
        { class: 'font-small', refClass: 'smallFont' },
        { class: 'font-medium', refClass: 'mediumFont' },
        { class: 'font-large', refClass: 'largeFont' },
    ];
defaultFontSize = 'mediumFont';

changeFontSize(selector: string, indexOfClassToAdd: number) {
  this.defaultFontSize = selector;
  const el: Element = document.getElementById(selector));
  // Iterate each class in the list to remove it.
  this.refClassArray.forEach((refClass: RefClassInterface) => {
    // Remove the class from the specific element only if its present.            
    if (el.classList.contains(refClass.refClass) {
      this.renderer2.removeClass(el, refClass.refClass);
    };
  });
  this.renderer2.addClass(el, refClassArray[indexOfClassToAdd].refClass);
};

This would imply that you are aware of what is the class to be applied (and it being present in the style.scss or and the appropriate scss file).

Kind regards.

Pytth · Accepted Answer · 2020-11-16 21:22:17Z

2

Out of curiosity, why are you doing it this way rather than simply using a class with the desired text size?

Either way, it looks like your value is not being applied because your selector is not specific enough.

To correct for this, you could make an artificially specific selector with something like this:

html > body * { // rules }

answered Nov 16, 2020 at 21:22

Pytth

4,1961 gold badge28 silver badges32 bronze badges

1 Comment

Naman Jain Over a year ago

I am doing this way because I have menu, header, screen (where data is displayed and font change is required) and footer. And the requirement is to change the size of the fonts displaying data. table header, section title etc should not be changed.

PMO1948 · Accepted Answer · 2020-11-19 08:02:36Z

1

Why not use ngClass? Define three classes

.font-small{
    fontSize: 10px
}
.font-medium{
    fontSize: 11px
}
.font-large{
    fontSize: 12px
}

Bind something to the user select, like userChoice: SizeEnum or something

Then, on your data element, use ngClass to bind

ngClass = "{
 'font-small': userChoice === sizeEnum.small,
 'font-medium': userChoice === sizeEnum.medium,
 'font-large': userChoice === sizeEnum.large
}"

answered Nov 19, 2020 at 8:02

PMO1948

2,5841 gold badge17 silver badges43 bronze badges

Comments

Naman Jain · Accepted Answer · 2020-11-19 11:10:49Z

1

The issue was resolved by moving

:host-context(.mediumFont) {
    --fontSize: 11px;
}
:host-context(.largeFont) {
    --fontSize: 12px;
}
:host-context(.smallFont) {
    --fontSize: 10px;
}

from app.component.scss to styles.scss. Because the pop-ups are not a part of app.compontnet.html they render outside it.

answered Nov 19, 2020 at 11:10

Naman Jain

4111 gold badge7 silver badges28 bronze badges

Collectives™ on Stack Overflow

Angular: Changing font-size using css variables is applying but not reflecting in browser for certain fields

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related