<ion-select-option *ngFor="let make of makes" [value]="make?.code">
{{make?.name}}<span class="change-stuff">example</span>
</ion-select-option>
I want to be able to have a span or div with some css inside the ion-select-option is this possible?
For example the text example I might want to have a green background or some other custom style
I'm afraid this cannot be done, for now. Here you can check a GitHub issue in which someone asks exactly for that functionality.
It seems that it will be included in Ionic 6.
Related
I am working on an Ionic app that uses both Ionic Themes and Angular Materials. In some instances I am using and in some of those instances I am attempting to change the button color as such for example. When setting the ion-button to any given color it is rendered as white.
I've tried making updates to my scss files and to make sure the theme is incorporated correctly. I've spent an entire day searching for solutions and have found no answers. I was under the impression that Ionic themes are default in an Ionic app and am not sure why this isn't working.
0" padding no-bounce text-center fullscreen expand="block">
DELETE STUDENT INFORMATION
button is rendered as white
For button background try below.
<ion-button color="white">Button</ion-button>
If this doesn't work, please share your code. I will update your code.
Does anyone know how to place an icon in a toggle?
Is this even possible with the new shadow dom rules?
https://beta.ionicframework.com/docs/api/toggle/
I have tried placing a icon element in the toggle but no succes.
Thanks,
Kelvijn
It's not possible to add attributes to ion components.
Confirmed by admin from the ionic slack.
Going to make my own slider then.
Thanks for reading my post.
I just started developing an app in Ionic 3 and there is an issue I ran into. I want to have a box to enter text into. When I use following code, I can enter both single line text as well as multiple line text.
<ion-item>
<ion-label>Message</ion-label>
<ion-textarea [(ngModel)]="_message" name="message"></ion-textarea>
</ion-item>
But the issue is that the size of the box does not change. As I press Enter and type more words, the upper text hides because the view scrolls down. There is still space left in the view and I tried to adjust it, but couldn't.
Also, upon doing Google research, I did found a comment mentioning that this is a defect in Ionic Framework. But, I am not sure.
Thank You
It doesn't dynamically grow by itself. But you can increase the number of rows statically by adding rows.
<ion-textarea rows="5" [(ngModel)]="_message" name="message"></ion-textarea>
You can also try to modify its size dynamically yourself. Here is a sample code that does this.
I am looking for a way to replace the placeholder texts in an ion-select action sheet with icons instead of simple text.
Now, I know the texts can be changed by adding ‘okText’ and ‘cancelText’ to the HTML:
<ion-select multiple="true" [(ngModel)]="selectedGenres" (ionChange)="filterByGenre()" okText="Okido!" cancelText="Nah, whatever..">
<ion-option *ngFor="let genre of genreList" value="{{genre}}">{{genre}}</ion-option>
</ion-select>
But what would be the best ways to add icons to those buttons?
For instance, I would like to replace the OK text with e.g. ‘ion-android-checkbox-blank’ icon and CANCEL text with e.g. ‘ion-android-close’ icon.
Not directly possible. You can use ionic modal to create your own selection list with your own buttons.
As an alternative, you may want to test emojis like ❌ and ✔️, but they will look different from device to device.
I am using a code like this in ionic 2.0.0rc4
<ion-list>
<ion-list-header>My Header</ion-list-header>
<!-- rest of ion-items -->
</ion-list>
In the documentation examples, list header's background is gray but in my app it has a white background! I don't know what is going on!
Any idea?
Cheers!
As per documentation, following SASS variable is used to set the list header background for ios $list-ios-header-background-color and its default value is transparent.
If you look closely, in the documentation also, color is coming grey for iOS and white for android & windows phone.
hope this helps.