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>
Related
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;
}
}
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
I have a list of cards that I need to show them in 1 column in small devices and 2 columns in medium device and 3 columns in large devices
based on https://stackoverflow.com/a/36432126/2279488 and https://stackoverflow.com/a/36432126/2279488 I tried below codes but no success at the end.
1.
<ion-row responsive-sm>
<ion-col *ngFor="let card of cards" width-50>
<ion-card >
on small device it shows correctly, on large and medium it shows 2 cards only
2.
<ion-row responsive-sm>
<ion-col width-50>
<ion-card *ngFor="let card of cards">
on small device it shows correctly, on large and medium 1 column is shown and all cards are in the column
3.
<ion-row responsive-sm>
<ion-col>
<ion-card *ngFor="let card of cards">
on small device it shows correctly, on medium and large it shows only 1 column and cards are shown in that column
I found the solution, in case other people having same issue
I added wrap to my first code and it works.
<ion-row responsive-sm wrap>
<ion-col *ngFor="let card of cards" width-50>
<ion-card >
I added in my HTML below code and it working for me.
<ion-row class="categoryView">
<ion-col class="gridCol" width-40></ion-col>
<ion-col class="gridCol" width-40></ion-col>
</ion-row>
ion-col.gridCol.col {
height: 80px;
background: azure;
margin: 10px;
}
ion-row.categoryView.row {
height: 100px;
background: black;
}
In a form I would like to use a full width element.
I don't need any label, is this possible?
This select is used to store a list of elements that are filled by a controller.
I have tried without using a but it does not change anything.
Thanks
You just need to remove the tag and set the size with max-width: 100%; width: 100%.
<ion-item>
<ion-select [(ngModel)]="selectModel" style="max-width: 100%; width: 100%">
<ion-option value="c">Fist Item</ion-option>
<ion-option value="e">Second Item</ion-option>
</ion-select>
</ion-item>
Regards.
I'm trying to align text in Html but it doesn't work and I do not know why. I'm using Ionic Framework.
My code is:
<ion-list>
<ion-item>
<b>Name</b> <p align="right"> {{paciente.name}}</p>
</ion-item>
....
</ion-list>
and it looks like this:
but I want all text int the same line, and I do not know how to get that.
See this demo: http://play.ionic.io/app/b477ea2f5623
In ionic items, if you write any text within span with item-note class then it will be aligned to right.This is built in class by ionic, your code will be like this :
<ion-item>
<b>Name</b> <span class="item-note"> {{paciente.name}}</span>
</ion-item>
See more tricks with ionic items provide by built in classes, see this Documentation
Add a css class as
.item {
position: absolute;
right: 0px;
width: 300px;
padding: 10px;
}
The p tag creates a paragraph on a new line, so you need an other element. You could use a span element which is floated right:
Html:
<ion-list>
<ion-item>
<b>Name</b> <span class="right"> {{paciente.name}}</span>
</ion-item>
....
</ion-list>
Css:
.right {
float: right;
}
Apply the ckass to all items you want to be on the right.