This select contains the list of all countries in register form. The point is that the ion-content in the form page is scrollable but select it self is not scrolling.
Here is the code:
<ion-item>
<ion-select interface="action-sheet" class="select" placeholder="Country">
<ion-option ngDefaultControl [value]='country.name' *ngFor="let country of countries">{{country.name}}
</ion-option>
</ion-select>
</ion-item>
Why select scroll is not working?
This is a known issue, you can track at https://github.com/ionic-team/ionic/issues/17311#issuecomment-460829890
Ionic have provided a workaround by setting following css in global.scss
.action-sheet-group {
overflow: auto !important;
}
Hope that helps
I had this problem in ionic 4 using interface=popover. The solution was to make a global css class:
.my-select-scrollable .popover-viewport {
overflow: scroll;
}
then add this attribute to the ion-select
[interfaceOptions]="{cssClass: 'm-select-scrollable'}"
You may be able to do something similar
Related
I have an ionic select list setup like below. Why is the text not taking the full width of the select?
ionic -v --> 6.18.1
I've tried some suggestions from here but no luck: Add custom styling to ion-select
.myCustomSelect{
max-width: 100% !important;
}
<ion-select
cssClass="myCustomSelect"
[interface]="prmInterfaceType"
[multiple]="prmMultiSelect"
(ionChange)="onSelectChange($event)"
[(ngModel)]="selectedValue"
name="select-dropdown"
ngDefaultControl>
<ion-select-option *ngFor="let entity of prmEntities$ | async" [value]="entity">
{{entity.entityName}}
</ion-select-option>
</ion-select>
I need to change the background color of the selected radio input.
I have the following ion-radio list:
<ion-list radio-group [(ngModel)]="selectedRadio">
<ion-item *ngFor="let ing of pizzaIng; let i = index">
<ion-label>{{ing.name}}</ion-label>
<ion-radio [value]="ing.name"></ion-radio>
</ion-item>
</ion-list>
The only way it's working, is by overriding item-md class of ion-item into:
ion-item.item-md{
background-color: red;
}
But its changing all the radio options displayed. How can I only change the color of the selected one?
Here is a prepared stackblitz for it.
got this to work on my ionic 3 project and works in your demo. also just a heads up on using classes with 'md' at the end will only effect android.
.css
page-home {
.item-radio-checked{
background-color: #a0a;
}
}
I am making a rating form where I am suppose to make rating stars but if I use alert then I am not able to make rating stars like empty and then fill by clicking .How to make it in alert
I have following html code
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-card padding>
<rating [(ngModel)]="rate" max="5" emptyStarIconName="star-outline"
halfStarIconName="star-half" starIconName="star" nullable="false"
(ngModelChange)="onModelChange($event)">
</rating>
<h2>{{rate}}</h2>
</ion-card>
</ion-content>
and this is its scss
ul {
padding: 10px;
&.rating li {
padding: 5px 10px !important;
background: none;
color: #ffb400;
ion-icon {
font-size: 40px;
}
}
}
This working fine but it is working in card I want a pop up like alert and I dont know how to integrate it in alert.
Secondly I have tried to make alert itself with stars as buttons but its not working the way I wanted,I need help
Hi put above css under src\theme\variables.scss
I use ionic 3 and trying to change background-color ion-select.
html file :
<ion-select [class.disabledField]="disabledVar" disabled="{{disabledVar}}" [(ngModel)]="dataModel">
<ion-option *ngFor="let item of lists" value="{{item.id_str}}">{{item.text}}</ion-option>
</ion-select>
scss file:
.disabledField {
background-color:#d7d7d7;
}
The background-color can't change. but somehow this code no issue with ion-input and ion-datetime. this problem only with ion-select.
I really appreciate if someone can help me.
Thank you.
Problem solve
.item-select-disabled ion-label,ion-datetime {
opacity: 100;
color:#000;
font-size: $font-size-field;
}
.disabledField {
opacity: 100;
background-color:#d7d7d7;
}
.select-disabled {
opacity: 100;
background-color:#d7d7d7 !important;
/*you can optionally add !important*/
}
<ion-select [class.disabledField]="disabledVar" disabled="{{disabledVar}}" [(ngModel)]="dataModel">
<ion-option *ngFor="let item of lists" value="{{item.id_str}}">{{item.text}}</ion-option>
</ion-select
I am using the below code to show a stacked in Ionic version 2.
<ion-item>
<ion-label color="primary" stacked>Joy to the world</ion-label>
<ion-input value="C G"></ion-input>
</ion-item>
By default the label displayed above the text field.
But I want to show the label below the text field.
Is it possible to show the label below the text field.
Thanks for your help.
How about overwriting these sass variables:
.item-label-stacked .input-wrapper,
.input-wrapper {
flex-direction: column-reverse;
}
.label-md[stacked] {
margin-top: 0;
}