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;
}
Related
I had created the ionic popup. Created a popover page and added action on button click to display popover from home page. but iam unable to change the width of the popover. below is the code;
home.page.html:
<ion-content>
<ion-button expand="full" (click)="openPopover($Event)">Open popover</ion-button>
</ion-content>
home.page.ts:
async openPopover(ev: Event) {
const popover = await this.popoverController.create({
component:PopoverPage,
componentProps: {
custom_id: this.value
},
});
popover.present();
}
popover.page.html:
<ion-content>
<ion-list>
<ion-item>
this is popover
</ion-item>
<ion-item button color="danger" (click) = "closePopover()">
<ion-icon name="close" slot="start"></ion-icon>
Close Popover
</ion-item>
</ion-list>
</ion-content>
popover.page.ts:
closePopover() {
this.popoverController.dismiss();
}
please assist me how can i change the width of the popover as i tried adding custom css to the ion-content of the popover page but its not working.
The other method did not work for me, these changes need to be made:
First the .contact-popover .popover-content{ width: 320px; } content needs to be in global.scss
" This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the src/global.scss file or you can register a new global style file by adding to the styles build option in angular.json." (says in documentation)
Second the CSS cannot be width, it needs to be --width. The custom css properties for this are at the bottom of this: https://ionicframework.com/docs/api/popover
two ways:
override the SCSS variables;
$popover-md-width: 320px; $popover-ios-width: 320px; $popover-wp-width: 320px;
or 2. give your popover a class:
let popover = this.popover.create(ContactPopover, {}, {cssClass: 'contact-popover'})
and then style the .popover-content:
.contact-popover .popover-content{ width: 320px; }
Ionic automatically calculates the correct position for your custom width popover.
Ionic ^4 Popover width can be modified on a global level adding the following to the styles.scss file:
ion-popover {
--width: 320px;
}
For ionic 6.x the solution is
ion-popover {
&::part(content) {
min-width: 230px;
}
}
I need to make the end slot of my list item take up less width so I can make the name in the first slot longer.
Currently it takes up around 50% of the width and is wasting space.
<ion-list *ngIf="!isLoading">
<ion-item *ngFor="let trail of trails" #defectReport (click)="onViewTrailDetails(trail)">
<fa-icon class="icon icon-center status-open-icon" *ngIf="trail.status === trailStatus.Open" slot="start" [icon]="['fas', 'check-circle']" size="2x"></fa-icon>
<fa-icon class="icon icon-center status-closed-icon" *ngIf="trail.status === trailStatus.Closed" slot="start" [icon]="['fas', 'times-circle']" size="2x"></fa-icon>
<fa-icon class="icon icon-center status-new-icon" *ngIf="trail.status === trailStatus.New" slot="start" [icon]="['fas', 'burn']" size="2x"></fa-icon>
<fa-icon class="icon icon-center status-under-construction-icon" *ngIf="trail.status === trailStatus.UnderConstruction" slot="start" [icon]="['fas', 'exclamation-triangle']" size="2x"></fa-icon>
<ion-label class="first-item-label">
<span><h2 class="heading">{{trail.name}}</h2></span>
<p class="label-text">{{trail.status}}</p>
</ion-label>
<ion-label slot="end" class="second-item-label">
<p class="sub-heading">{{trail.statusNotes}}</p>
<p class="label-text-small">{{trail.lastUpdated | timeAgo}}</p>
</ion-label>
</ion-item>
</ion-list>
I ended up using ion-note. It caused some formatting issues but resolved my problem.
https://ionicframework.com/docs/api/note
<ion-note slot="end" class="second-item-label" [ngClass]="{'margin-top-auto': !trail.statusNotes}">
<p class="sub-heading">{{trail.statusNotes}}</p>
<p class="label-text-small">{{trail.lastUpdated | timeAgo}}</p>
</ion-note>
ion-item is a flex container and ion-label has the style flex-grow: 1.
What I did is setting the first to flex-grow: 2, resulting in 2/3, 1/3 responsive proportions for labels.
In your case just add this to the CSS:
.first-item-label {
flex-grow: 2;
}
If you want the last label to have a fixed width, do this instead:
.second-item-label {
flex: 0 0 80px;
}
I recommend to use the following. Just change / reset the flex style of the label element, since it's a flex layout.
ion-label[slot='end'] {
flex: unset;
text-align: end;
}
The property text-align: end is optional and has nothing to do with the question. But in my opinion the right slot of an item should be right aligned. Especially input field.
You could use every element you want. But ion-label has some predefined styles which harmonize with the framework. And ion-note changes e.g. the font-size (in md style).
Update: This will be fixed in upcoming Ionic version (maybe Ionic 6). With this change flex: 1 is not longer set on slot="end".
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'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.