CODEWITHSUNDEEP
cssionic-framework
user3586826
user3586826

Reputation: 158

ionic 4 "ion-option" text wrap

I am working with ionic 4 and i am having a problem trying to do a text wrap inside a "ion-select"

my select looks like this:

enter image description here

if i change my css directly on google chrome ( Style section on the "inspect element" menu) to "white-space: pre-wrap"

It looks like this:

enter image description here

and this is what i want to get.

on my HTML code i have this:

<ion-item>
  <ion-label>Dirección de Entrega<a style="color: brown;">*</a></ion-label>
  <ion-select [(ngModel)]="ordHerder.addressId" popover >
    <ion-option style="white-space: pre-wrap !important;" *ngFor="let item of register_data.directions" value="{{item.recId}}" text-wrap>{{item.direction}}</ion-option>
  </ion-select>
</ion-item>

and my css:

shopping-car-delivery {
    .alert-ios .alert-radio-label{ white-space: pre-wrap !important;}
    .alert-md .alert-radio-label{ white-space: pre-wrap !important;}
    .alert-wp .alert-radio-label{ white-space: pre-wrap !important;}
}

Thanks :)

Upvotes: 6

Views: 12511

Answers (8)

ssomu
ssomu

Reputation: 89

If none of the above solutions works try root level css changes like below

   :root {
  ion-popover ion-select-popover ion-radio-group ion-item ion-label{
            white-space: pre-line !important;
  }
}

Upvotes: 1

Sai Sundeep
Sai Sundeep

Reputation: 293

ion-select is using the alert to show the options, so you need to override the default styles

Step1:

.alert-tappable.sc-ion-alert-md.sc-ion-alert-ios {
    display: contents !important;
}

by default, display: flex; change it to the display: contents !important;

Step2:

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

by default, white-space: nowrap; change it to white-space: pre-line !important;

Upvotes: 0

Pankaj Sati
Pankaj Sati

Reputation: 2539

By default, select uses the AlertController API to open up the overlay of options in an alert. The interface can be changed to use the ActionSheetController API or PopoverController API by passing action-sheet or popover, respectively, to the interface property.

To customize the ion-select options with interface="popover" in ionic, do the following:

Solution: Add the code in global.scss(Ionic4) and outside page-app tags in app.scss(Ionic3) so that the following css is accessible outside the component

.popover-content ion-list ion-label
    {
    font-size:12px !important;
    }

Detailed Explanation:

  • The problem is that options inside ion-select are added as a Popover/Alert/Actionsheet.
  • The HTML code for showing the ion-select interface is produced outside the component i.e. outside the ion-router-outlet component.
  • So, any code you put inside your component's scss file to change looks of ion-select options will not reflect in the browser.

Example: How DOM looks like: (Ionic 4) How select options are added in Ionic 4 DOM

Ionic 3How select options are added in Ionic 3 DOM

This will change the look of ion-select option throughout the App

To customize it for different pages, I did it by adding and removing a custom class from the main app selector

ionViewDidEnter()
{
let appRoot:any=document.getElementById('myAPP');
this.renderer.setElementClass(appRoot,'customIonSelectCSS',true); //add
}

ionViewDidEnter()
{
let appRoot:any=document.getElementById('myAPP');
this.renderer.setElementClass(appRoot,'customIonSelectCSS',false); //remove
}

Upvotes: 0

Dharamveer Mithilesh Gupta
Dharamveer Mithilesh Gupta

Reputation: 93

if you are with Ionic 4 then just use class="ion-text-wrap" for wrapping text anywhere in element.

Ionic 4 CSS Classes Reference :- https://ionicframework.com/docs/layout/css-utilities

For Ionic 3 you can use class="text-wrap"

Upvotes: 0

Dipankar Mondal
Dipankar Mondal

Reputation: 61

just add this in your app.scss if you are using ionic 4

.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: 5

Dewashish
Dewashish

Reputation: 151

Fixed it by overriding alert-radio-label.sc-ion-alert-md , alert-radio-label.sc-ion-alert-ios and updating whitespace to pre-line in page.scss

.alert-radio-label.sc-ion-alert-md {
  padding-left: 52px;
  padding-right: 26px;
  padding-top: 13px;
  padding-bottom: 13px;
  flex: 1;
  color: var(--ion-color-step-850, #262626);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: pre-line;
}

Also, reduced font-size to 14px, since my text was around 35-40 characters.

enter image description here.

Upvotes: 1

Pol Fern&#225;ndez
Pol Fern&#225;ndez

Reputation: 1208

Adding this to app.scss worked:

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

Upvotes: 2

Chad Nehemiah
Chad Nehemiah

Reputation: 881

the css white-space should be extended to pre-line so your .scss would be

 shopping-car-delivery {
    .alert-ios .alert-radio-label{ white-space: pre-line !important;}
    .alert-md .alert-radio-label{ white-space: pre-line !important;}
    .alert-wp .alert-radio-label{ white-space: pre-line !important;}
}

Upvotes: 0

Related Questions