Ionic select overwrite css no wrap

Ionic Framework ionic-v3
1

Hi, I have a ionic 4 application and I have to use select component in a browser, but
the option text is long so is a problem because the css for the option have the property white-space: no-wrap

img
img.png670×572 7.41 KB

So I try in the scss to add


.alert-radio-label)
 {
  white-space: normal !important;
}


.alert-radio-label.sc-ion-alert-md {
  white-space: normal !important;
}

but not working…I think because is a dinamic component and angular transform my scss with

.alert-radio-label[_ngcontent-c0] {
  white-space: normal !important; }

.alert-radio-label.sc-ion-alert-md[_ngcontent-c0] {
  white-space: normal !important; }```
2

hello,

on some elements

 white-space: normal !important;
    word-wrap: break-word !important;

seems this working, but as fas as I see not on select. Maybe you should take a look to the original implementation on github, how it is implementetd.

Best regards, anna-liebt

1 Like
3

Thanks but only solution is to use ViewEncapsulation at the component.ts level.
Is not a good solution because the css rules is global, but there aren’t other solutions.
For me is impossible that ionic team create a select component that can have only 6 characters without this workaoround!!!

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
  encapsulation: ViewEncapsulation.None
})