CODEWITHSUNDEEP
cssionic-frameworksassionic4
Glen Elkins
Glen Elkins

Reputation: 917

Ionic 4 SCSS In Page Is Being Ignored

I'm having a nightmare trying to get SCSS to work in a page in ionic 4. I'm using the scss file that is generated when you create a page with: ionic generate page

So the component is importing the file:

@Component({
  selector: 'app-singleform',
  templateUrl: './singleform.page.html',
  styleUrls: ['./singleform.page.scss'],
})

In the single form.page.scss file all i am trying to do is change .input-wrapper from display:flex to display:block and nothing happens:

.input-wrapper {
  display: block !important;
}

I can actually see the code is loaded in via the dom inspector, it's just not applied to the input-wrapper around the label and input field; it's still showing display: flex

I've had these issues constantly, none of the scss ever seems to do anything!

Upvotes: 1

Views: 345

Answers (1)

user9088454
user9088454

Reputation: 1122

try this:

<!-- Inputs with Floating labels -->
<ion-item>
<ion-label position="floating">Floating Label</ion-label>
  <ion-input></ion-input>
</ion-item>

<!-- Inputs with Stacked labels -->
<ion-item>
<ion-label position="stacked">Stacked Label</ion-label>
  <ion-input></ion-input>
</ion-item>

For more details check it out: ion-input

Upvotes: 2

Related Questions