CODEWITHSUNDEEP
javascriptcssangularsassionic3
Sampath
Sampath

Reputation: 65988

Change auto generated CSS dynamically

Could you tell me how can I change the css dynamically? Here the problem is, the css has been generated by the framework itself. So I cannot declare or change it.

This is at runtime:

enter image description here

I need to pick swiper-pagination-bullets class and need to give bottom value conditionally. Like so:

Note: this is just pseudo:

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

Upvotes: 1

Views: 726

Answers (2)

sebaferreras
sebaferreras

Reputation: 44669

Just like @Duannx mentioned in the comments, you could conditionally add a class in the ion-slides element, and then apply the css style rule to the pager based on that class.

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

You'd need to change [class.with-data]="data" and replace it by the real property from your component, but then you could use it in the SCSS file to change the styles of the pager:

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

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

Upvotes: 1

Yangshun Tay
Yangshun Tay

Reputation: 53229

Instead of changing CSS dynamically, it would be better to override it instead by dynamically injecting a stylesheet into the page at runtime.

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

I'd try to avoid using !important. If you inject a stylesheet in the manner shown above, it will already take precedence over the existing style due to it appearing later on the page, assuming the same selector specificity.

Or else you can try to artificially increase the specificity by doing .swiper-pagination-bullets.swiper-pagination-bullets (repeat as you deem fit). If that fails to work, then use !important.

Code for stylesheet injection taken from here.

Upvotes: 1

Related Questions