How to override ionic css styles for each page


#1

Let’s say I have a lot of pages and for each I want to redefine the style of .scroll

This div not aviable on html, only when i show page in chrome inspector -
div class=“scroll” style=“transform: translate3d(0px, 0px, 0px) scale(1);”

I try add class to my view ion-view class ="testPage"
and then on my css for this page try:

.testPage.scroll
{
background-color: red !important;
}

but this not working…Please help )


#2

Have you used

.scroll
{
background-color: red !important;
}

Implement this class into “style.css” inside css folder.


#3

This override .scroll class for all pages, i need change it only for one page


#4

I think then you need to rename .scroll class and add it dynamically for requesting view on controller.

I think its make scene :yum:


#5

I not much want add something like this to my controller:
$( ".scroll " ).addClass( “tesOverride” );

or

angular.element(’#scroll’)…addClass(‘tesOverride’);

It would be nice to solve this by css… :grinning: