CSS not being applied on page. Ionic 4

@borconi wrote:

I’m trying to apply css rules to specific page, but they are not being generated/applied, here is my code:

page.ts file:

import { Component, OnInit } from '@angular/core';
import { NavController,Platform,LoadingController,AlertController,ModalController  } from '@ionic/angular';

@Component({
  selector: 'app-xxxx',
  templateUrl: './xxxx.page.html',
  styleUrls: ['./xxxx.page.scss'],
})
export class XxxxPage implements OnInit {

  constructor(public alertCtrl: AlertController) { 
    this.alertCtrl.create({header: 'No Stores',
																		  subHeader: 'There are no stores in your vicinity!',
																		  buttons: ['OK']
																		}).then(alert=>alert.present());
  }

  ngOnInit() {
  }


}

html:

<ion-header>
  <ion-toolbar>
    <ion-title>xxxx</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

scss:

.alert-wrapper{
    max-width: unset !important;
    width: 100% !important;
}

I would expect the alert window to take up 100% width, but it’s not. Inspecting the html elements the css rule doesn’t even exists.

Adding the rule in the global.scss works but I’m not looking to change the style globally just for one component.

What am I’m missing?

Posts: 2

Participants: 2

Read full topic