Issue with font-size changes using css variables in Angular not updating in browser for specific fields

Question

Issue with font-size changes using css variables in Angular not updating in browser for specific fields

Utilizing CSS variables, I have implemented a feature that allows users to adjust the font size to small, medium, or large. While this functionality works correctly for most fields, there are certain instances where the value is applied but not displayed.

: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);
    }

The above logic outlines my current approach.

https://i.sstatic.net/Dd0IG.png

https://i.sstatic.net/YCB3P.png

The first image displays an element in which the font-size adjustment is functioning properly. Hovering over the --font-size reveals a value of 11px. In contrast, the second image depicts an element where the font-size adjustment does not yield any visible change when hovering over --font-size. It is worth noting that both elements reside within the <body>.

html css angular typescript css-variables

Answer 1

Answer №1

It is not recommended to directly modify your HTML code as it can leave your application vulnerable to malicious attacks, such as XSS Attacks.

The Angular Team suggests using the Renderer2 instead.

If you decide to update your code to utilize Renderer2, here's what will happen:

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 through each class in the list to remove it.
  this.refClassArray.forEach((refClass: RefClassInterface) => {
    // Remove the class from the specific element only if it is present.            
    if (el.classList.contains(refClass.refClass)) {
      this.renderer2.removeClass(el, refClass.refClass);
    };
  });
  this.renderer2.addClass(el, refClassArray[indexOfClassToAdd].refClass);
};

This means that you need to know which class to apply (and ensure it is defined in the style.scss or appropriate .scss file).

Best regards.

Answer 2

It is not recommended to directly modify your HTML code as it can leave your application vulnerable to malicious attacks, such as XSS Attacks.

The Angular Team suggests using the Renderer2 instead.

If you decide to update your code to utilize Renderer2, here's what will happen:

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 through each class in the list to remove it.
  this.refClassArray.forEach((refClass: RefClassInterface) => {
    // Remove the class from the specific element only if it is present.            
    if (el.classList.contains(refClass.refClass)) {
      this.renderer2.removeClass(el, refClass.refClass);
    };
  });
  this.renderer2.addClass(el, refClassArray[indexOfClassToAdd].refClass);
};

This means that you need to know which class to apply (and ensure it is defined in the style.scss or appropriate .scss file).

Best regards.

Answer 3

Answer №2

I'm interested to know why you've chosen this method instead of just applying a class with the preferred text size.

Regardless, it seems that your style isn't taking effect due to the lack of specificity in your selector.

To fix this issue, you might consider creating an overly specific selector like this:

body > div * { // styles }

Answer 4

I'm interested to know why you've chosen this method instead of just applying a class with the preferred text size.

Regardless, it seems that your style isn't taking effect due to the lack of specificity in your selector.

To fix this issue, you might consider creating an overly specific selector like this:

body > div * { // styles }

Answer 5

Answer №3

Why not utilize the ngClass directive? Specify three different classes:

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

Connect something to the user's selection, such as userChoice: SizeEnum or another variable

Afterward, apply ngClass to your data element for binding

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

Answer 6

Why not utilize the ngClass directive? Specify three different classes:

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

Connect something to the user's selection, such as userChoice: SizeEnum or another variable

Afterward, apply ngClass to your data element for binding

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

Answer 7

Answer №4

The issue was fixed by relocating the following code:

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

It was moved from app.component.scss to styles.scss. This change was necessary because the pop-ups were rendering outside of app.compontnet.html.

Answer 8

The issue was fixed by relocating the following code:

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

It was moved from app.component.scss to styles.scss. This change was necessary because the pop-ups were rendering outside of app.compontnet.html.

Issue with font-size changes using css variables in Angular not updating in browser for specific fields

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways to retrieve dropdown values

Various hues blending and intertwining with one another

Definition file for mapbox-gl-draw in Typescript, also known as d.ts file

brings fulfillment except for categories

Issue: The UserComponent is attempting to set the property 'id' of an undefined object, resulting in an error

Using null or undefined for ternary operator formatting in React applications

Removing HTML DOM elements from a string using JavaScript: A step-by-step guide

Exploring Realtime Database Querying with Firebase 5.0

having difficulty transmitting data or interacting with certain buttons on the site using selenium in python

Safari does not stop the scrolling of the <body style="overflow-y: hidden"> tag

Position the DIVs at the bottom of the TD

Combining PHP and MySQL with a join statement

Switchable radio options

The functionality of Angular animate becomes compromised when there is a conflict between predefined CSS states and transition states

Error: The property 'children' is not found in type '{ children?: ReactNode; }'

Retrieving the selected value from a dropdown menu before it is altered using vanilla JavaScript

Developing an npm package for storing a communal instance

What could be causing the 404 error in my Angular 2 and Node.js setup?

Looking for a way to toggle the visibility of a dropdown list when clicking on an input in Angular7?

Embedding images within written content