Update dynamically generated CSS automatically

Question

Update dynamically generated CSS automatically

Is there a way to dynamically change the CSS? The problem I'm facing is that the CSS is generated by the framework itself, making it impossible for me to declare or modify it.

Here's the scenario at runtime:

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

I am looking to target the swiper-pagination-bullets class and adjust the bottom value based on certain conditions. For example:

Note: This is just a rough draft:

If data != null {
   .swiper-pagination-bullets {
       bottom: 190px !important;
    }
} else {
    .swiper-pagination-bullets {
       bottom: 150px !important;
    }
}

javascript css angular sass ionic3

Answer 1

Answer №1

In the feedback provided by @Duannx, a suggestion was made to conditionally include a class within the ion-slides element, and then adjust the CSS styling of the pager based on the presence of that class.

<ion-slides pager="true" [class.with-data]="data" ...>
    <ion-slide *ngFor="...">
        <!-- ... -->
    </ion-slide>
</ion-slides>

To implement this, you will need to update [class.with-data]="data" with the appropriate property from your component. Subsequently, you can utilize this class in your SCSS file to modify the appearance of the pager:

ion-slides.with-data .swiper-pagination-bullets {     
    bottom: 190px !important;
}

ion-slides:not(.with-data) .swiper-pagination-bullets {
    bottom: 150px !important;
}

Answer 2

In the feedback provided by @Duannx, a suggestion was made to conditionally include a class within the ion-slides element, and then adjust the CSS styling of the pager based on the presence of that class.

<ion-slides pager="true" [class.with-data]="data" ...>
    <ion-slide *ngFor="...">
        <!-- ... -->
    </ion-slide>
</ion-slides>

To implement this, you will need to update [class.with-data]="data" with the appropriate property from your component. Subsequently, you can utilize this class in your SCSS file to modify the appearance of the pager:

ion-slides.with-data .swiper-pagination-bullets {     
    bottom: 190px !important;
}

ion-slides:not(.with-data) .swiper-pagination-bullets {
    bottom: 150px !important;
}

Answer 3

Answer №2

One way to handle dynamic CSS changes is by injecting a stylesheet at runtime instead of dynamically altering the existing styles.

const style = document.createElement('style');
const bottom = condition ? 190 : 150;
style.insertRule(`.swiper-pagination-bullets { bottom: ${bottom}px; }`, 1);
document.head.appendChild(style);

Avoid using !important if possible. Injecting a stylesheet as shown above will automatically take precedence over existing styles because it appears later on the page, assuming similar specificity in selectors.

If needed, you can increase specificity by duplicating the selector like

.swiper-pagination-bullets.swiper-pagination-bullets

. If that still doesn't work, then consider using !important.

This code snippet for injecting stylesheets was sourced from here.

Answer 4

One way to handle dynamic CSS changes is by injecting a stylesheet at runtime instead of dynamically altering the existing styles.

const style = document.createElement('style');
const bottom = condition ? 190 : 150;
style.insertRule(`.swiper-pagination-bullets { bottom: ${bottom}px; }`, 1);
document.head.appendChild(style);

Avoid using !important if possible. Injecting a stylesheet as shown above will automatically take precedence over existing styles because it appears later on the page, assuming similar specificity in selectors.

If needed, you can increase specificity by duplicating the selector like

.swiper-pagination-bullets.swiper-pagination-bullets

. If that still doesn't work, then consider using !important.

This code snippet for injecting stylesheets was sourced from here.

Update dynamically generated CSS automatically

Answer №1

Answer №2

Similar questions

The function Route.delete() expects a callback function, however, it received an [object Undefined] instead

Leveraging $http or $timeout in conjunction with $stateProvider in AngularJS

A guide on aligning a CSS item perfectly in the center using absolute positioning

Filtering database results from an Angular component

Guide to flattening a nested array within a parent array using lodash

Tips on adjusting the dimensions of a switch in kendo UI angular with CSS

What could be causing the "keyframes method" in my css to not function correctly?

Is it possible for the HTML data attribute to store a direct link to a specific DOM element?

Adjusting ng-required in AngularJS for both empty values and -1

using absolute URLs for image source in JavaScript

Focus on the iPad3 model specifically, excluding the iPad4

Creating unique shaders with THREE.ShaderLibLearn how to craft personalized shaders using THREE

WordPress does not recognize the jQuery function

Leaving a message on someone else's Facebook wall by sharing a link to a website

What are the steps to creating a fading effect for an item that appears as it enters the field of view and disappears as it exits the field of view?

Customizing functions in JavaScript with constructor property

Can you use ng-show within ng-if in Angular?

Is it possible to host multiple React applications on a single port? Currently experiencing issues with running both an Admin panel and the Front side in production mode on the same Node.js API server

Can you provide a list of factors that influence coverage? Additionally, is there a specific algorithm available for calculating

Struggling to make the height attribute work in Bootstrap 4 alpha