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.
Related
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 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
On the top of the page, I’ve got a div for which background image has been set. I want to place the fab button on the bottom right edge of this div. Exactly like the following image. How can I do this?
Just use the edge attribute that comes along with fabs:
<ion-fab bottom right edge>
<button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>
For this to work the div (or any tag) having the fab inside must have position set to relative, absolute or fixed to work, position: inherit may work too depending on parent positioning.
Hope this helps.
Thanks to #Garrett and #Gabriel, I got it working using the following markup and scss. It's important to place the FAB button inside the div to which we want to assign the background image so that we can use relative positioning:
<ion-content>
<div id="header">
<ion-fab bottom right edge>
<button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>
</div>
</ion-content>
And the scss file:
#header {
background-image: url('../assets/images/anonymous.jpg')!important;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 25vh;
}
ion-fab {
position: relative;
}
ion-fab[bottom][edge] {
bottom: -21vh;
}
.fab {
margin-right: 3vw;
}
Here is what I could get to work.
This works by creating a fab-container that is going to overlay the main container on this page. For this to work you need to know their heights. Then we make the fab-container z-index of 1 to be on top. Then we can use flex to make the fab be in the bottom right. Then we can add a margin-top half the size of the fab to the fab-container to have the fab hover halfway in-between. Lastly we can add margin-right to get the fab off the right side.
This may not be the best way to do it, since it requires knowing the height of your container, but it was the way that I would approach this task.
<ion-content>
<div class="container"></div>
<div class="fab-conatainer">
<ion-fab class="fab">
<button ion-fab>
<ion-icon name="camera"></ion-icon>
</button>
</ion-fab>
</div>
<div class="contacts-container">
<ion-list>
<ion-item>
<ion-input placeholder="Name"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Phone"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Email"></ion-input>
</ion-item>
</ion-list>
</div>
</ion-content>
CSS
.container {
width: 100%;
background: #333;
height: 500px;
}
.fab-conatainer {
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 500px;
z-index: 1;
margin-top: 28px;
}
.fab {
margin-right: 14px;
}
I have this ion-item in my Ionic 3 application. It includes an ion-badge and an ion-button. I want them both to be vertically aligned inside the ion-item. I tried the answers in here, but it didn't work. At the end I need to have these ion-badge and ion-button side by side.
<ion-item>
<ion-badge>150</ion-badge>
<button ion-button>My Button</button>
</ion-item>
Add a class to your ion-item.
HTML:
<ion-item class="my-item">
<ion-badge>150</ion-badge>
<button ion-button>My Button</button>
</ion-item>
And add the following CSS-styles to the ion-label child of your ion-item.
SCSS:
.my-item {
ion-label {
display: flex;
flex-direction: row;
align-items: baseline
}
}
Result:
UPDATE:
Code and result with icon added to the button:
HTML:
<ion-item class="my-item">
<ion-badge>150</ion-badge>
<button ion-button icon-end>My Button
<ion-icon name="arrow-down"></ion-icon>
</button>
</ion-item>
SCSS:
.my-item {
ion-label {
display: flex;
flex-direction: row;
align-items: baseline
}
ion-icon {
margin-left: 5px;
}
}
Also i added a CSS-rule for the <ion-icon> to get som space between the text and the icon in the button.
Result:
Add vertical-align to the styling:
<ion-badge style="vertical-align: bottom;">150</ion-badge>
justify-content: center; will be work!!
ion-badge {justify-content: center; }
Is there a way to achieve multiline ellipsis text in ionic 2. I have a card view and need to restrict maximum 2 lines to be showed inside it with vertical center alignment. I tried webkit css option but it is not working. I saw similar questions asked by others but couldn't figure out an answer for it.
Below is my html code
<ion-content class="cards-bg light-gray">
<ion-list>
<ion-card *ngFor="let od of orderDetails” class="fade_logo">
<ion-card-content> {{od.description}} </ion-card-content>
</ion-card>
</ion-list>
</ion-content>
Here the order description is long text, I just need to show only 2 lines.
It depends on font size and line height but put this in your .scss file and also change the height: to get the best result.
ion-card-content {
display: block;
display: -webkit-box;
height: 60px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}