CODEWITHSUNDEEP
cssionic4shadow-dom
Mohan Gopi
Mohan Gopi

Reputation: 7724

ionic-4 Text-wrap on ion-select-option

HTML

<ion-item>
    <ion-label>Popover</ion-label>
    <ion-select [interfaceOptions]="customPopoverOptions" interface="popover" placeholder="Select One">
      <ion-select-option value="brown" text-wrap>Brownasdfasdfasdfasdfadfadsfasdfadfasdfafdsadfaf</ion-select-option>
      <ion-select-option value="blonde">Blonde</ion-select-option>
      <ion-select-option value="black">Black</ion-select-option>
      <ion-select-option value="red">Red</ion-select-option>
    </ion-select>
  </ion-item>

image

SASS:

ion-select-option{
   ion-label{
     white-space: normal !important;
   }
}

I'm not able to override the existing white-space: nowrap

I would like to know how to override the shadow-dom css

Upvotes: 4

Views: 11256

Answers (11)

VeRJiL
VeRJiL

Reputation: 564

For Ionic Version 7

In order to do this properly you need to open your dev tools and look at the class for options in a select and find a class that relates only to select and write a global or a component scope css to target the specified class and override some of the properties and/or add new ones. Sometimes you dont have direct class to target the specific element so you need to find a unique tag name and select the target using css selectors.

Note: I am using interface="action-sheet" as the property for select, The solution might differ for other type of interfaces

/* This part is for the place holder when the select is not open */
ion-select::part(placeholder),
ion-select::part(text) {
    white-space: normal !important;
}

/* This part is for option text when you open the select */
.select-interface-option span {
    white-space: normal !important;
}

Upvotes: 0

Junaid
Junaid

Reputation: 4926

Add a class to each select-option & then target that from global.scss.

HTML

  • I'll add a text-wrap class to every ion-select-option:

     <ion-select
  placeholder="select your option"
  interface="popover"
  (ionChange)="handleChange($event)">
  <ion-select-option class="text-wrap" *ngFor="let entry of this.dropDownList" value="{{entry}}">{{entry}}</ion-select-option>
</ion-select>

global.scss

Here I am targeting that text-wrap class:

   ion-popover ion-select-popover {
     ion-item.text-wrap ion-label {
        white-space: normal !important;
     }
   }

Upvotes: 0

Miguel Carrasco
Miguel Carrasco

Reputation: 79

Edit assets/global.scss:

/* <ion-select multiple="true" ... */
.alert-checkbox-label.sc-ion-alert-md,
.alert-checkbox-label.sc-ion-alert-ios {
  white-space: normal !important;
}

/* <ion-select multiple="false" ... */
.alert-radio-label.sc-ion-alert-md,
.alert-radio-label.sc-ion-alert-ios {
  white-space: normal !important;
}

Tested in "@ionic/angular": "6.1.2"

Upvotes: 2

castamere
castamere

Reputation: 25

You can add this in your global.scss

.alert-tappable.alert-radio {
 height: auto;
 contain: content; 
}

.alert-radio-label.sc-ion-alert-md, .alert-radio-label.sc-ion-alert-ios {
  white-space: normal; 
}

Upvotes: 0

B45i
B45i

Reputation: 2601

For ionic 5

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

.alert-tappable.sc-ion-alert-md {
  height: initial !important;
  contain: initial !important;
}

Upvotes: 0

Kobus Beets
Kobus Beets

Reputation: 31

I have added this to my global.scss file and it seems to work well.

.alert-radio-button {
  height: auto !important;
}

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

I only tested it in an iOS emulator, not on a real iOS devices or on Android devices or emulators.

Upvotes: 0

VladimirTrubachoff
VladimirTrubachoff

Reputation: 34

You should use builtin CSS Utilities class .ion-text-wrap:

<ion-label class="ion-text-wrap">Very long label...</ion-label>

Upvotes: -1

Davide Simboli
Davide Simboli

Reputation: 91

In your global.scss add this:

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

.alert-radio-label.sc-ion-alert-ios {
    white-space: pre-line !important;
}

Upvotes: 4

Henrique Rodrigues
Henrique Rodrigues

Reputation: 216

On Ionic 5, the only thing that worked for me was:

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

Upvotes: 14

diacode
diacode

Reputation: 311

This worked for me on Ionic V5.4.15:

.alert-checkbox-label.sc-ion-alert-ios{
    white-space: pre-line !important;
    padding-top: 4px;    
}

Upvotes: 0

Ira Watt
Ira Watt

Reputation: 2135

As there's no attribute for this web-component it does make this a little difficult and messy

global.scss:

.item.sc-ion-label-md-h, .item .sc-ion-label-md-h{
     white-space: normal !important;
}

//or just 

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

This overrules the component styling classes.

enter image description here

Upvotes: 8

Related Questions