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.
Related
How can I turn off the auto uppercase function of <Button> in material UI 5?
<Button variant="contained">Hello</Button>
It will automatically turn the text to HELLO, but I just want to keep the original Hello. How can I do that?
Simply add this property to your button :
style={{textTransform: 'none'}}
<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.
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.
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 using the GWT to build the radio button , but when i display it shows one after another (in row).
Is there any way to stack the radio buttons in the group vertically?
It depends on the Panel you are adding it to. If you want things to line up vertically without any hassle, add each radio button to a VerticalPanel.
The reason it lines up is because GWT generates RadioButtons as HTML <span> elements, which by default has the CSS display set to inline.
If you prefer not to use a VerticalPanel, you can make RadioButtons have display:block;
One way is to wrap each RadioButton in a SimplePanel.
Another way is to set their display css attribute to block.
GWT RadioButton has a default provided CSS class for styling the RadioButton gwt-RadioButton
Example :
.gwt-RadioButton
{
display : block;
}