I need to add a number badge to the cart icon in ionic 3 so that the user gets the update of number of elements in the cart without actually visiting the page i tried to use the code of button and badge together but it was of no use
<button ion-button icon-only (click)="cart()">
<ion-icon name="cart"> <ion-badge item-end>260k</ion-badge></ion-icon>
</button>
Above code displays the badge next to the cart icon but not over it, so is there a way to add badge to the icon itself like we have in notification alert badges?
I think you will have to use some CSS and absolute positioning to place the badge above the left corner of the cart icon.
Something like this:
<button id="cart-btn" ion-button icon-only (click)="cart()">
<ion-icon name="cart"></ion-icon>
<ion-badge id="cart-badge">260k</ion-badge>
</button>
CSS
#cart-btn {
position: relative;
}
#cart-badge {
position: absolute;
top: 0px;
right: 0px;
}
Try this one
Template:
<div>
<button id="notification-button" ion-button clear>
<ion-icon name="notifications">
<ion-badge id="notifications-badge" color="danger">7</ion-badge>
</ion-icon>
</button>
</div>
CSS:
#notification-button {
position: relative;
width: 42px;
top:1px;
right: 1px;
overflow: visible!important;
}
#notifications-badge {
background-color: red;
position: absolute;
top: -3px;
right: -3px;
border-radius: 100%;
}
With the last version of Ionic (Ionic 4), this does the job perfectly:
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="profile">
<ion-icon name="person"></ion-icon>
<ion-badge color="danger">8</ion-badge>
<ion-label>profile</ion-label>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon name="settings"></ion-icon>
<ion-badge color="warning">3</ion-badge>
<ion-label>Market</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
Reference: https://www.youtube.com/watch?v=Q6ojtDFOaKA
for ionic 5 this work perfectly for me :
<ion-buttons slot="start" (click)="whateverYouWant()">
<ion-icon slot="start" name="mail"></ion-icon>
<ion-badge color="danger" style="position: absolute; right: -5px; top: -3px;">3
</ion-badge>
</ion-buttons>
PS : in my case it is place in a ion-item
preview result
Related
I have a fab list with fab buttons that shall have labels.
I found Fabs With Labels In Ionic 3 & whats the correct way of inserting label in an Ionic FAB list.
My HTML code is:
<ion-fab left top>
<button ion-fab color="light">
<ion-icon name="menu"></ion-icon>
</button>
<ion-fab-list side="bottom">
<button ion-fab>
<ion-icon name="person"></ion-icon>
<ion-label>Test Test Test</ion-label>
</button>
<button ion-fab>
<ion-icon name="alarm"></ion-icon>
<ion-label>Bla Bla</ion-label>
</button>
</ion-fab-list>
</ion-fab>
CSS
button[ion-fab] {
overflow: visible;
position: relative;
ion-label {
display: inline-block;
position: absolute;
top: -8px;
left: 60px;
color: white;
background-color: rgba(0,0,0,0.7);
line-height: 24px;
padding: 4px 8px;
border-radius: 4px;
pointer-events: auto;
}
contain: layout;
}
But the labels break the text to a newline if i don't specify a width.
If i do the labels don't adjust their width to the label's content.
How do i make the label content not wrap to a new line?
Issue originated from
ion-label {
white-space: normal !important;
}
from my app.scss
I have create a demo in ionic 3. You can check it:
Try this:
Stackblitz - Ionic 3 Fab button Demo Link
I have an ion-item that looks like that:
I would like to place the item-content div more to the left:
Question: What is the correct sass variable to change the values correctly? And how can I achieve that the item-content is aligned the same way in every ion-item independently on the label length?
My code:
<ion-list no-lines>
<ion-item-sliding *ngFor="let event of events">
<ion-item (click)="showEvent(event)">
<ion-label>
<h2>Projekt:</h2>
<h2>Ort:</h2>
<h2>Wetter:</h2>
<h2>Wind:</h2>
<h2>Temperatur:</h2>
</ion-label>
<div item-content>
<h2>{{event.project}}</h2>
<h2>{{event.place}}</h2>
<h2>{{event.weatherMain}}, {{event.averageTemp}}°C</h2>
<h2>{{event.windSpeed}} m/s</h2>
<h2>{{event.averageTemp}}</h2>
</div>
</ion-item>
<ion-item-options>
<button ion-button icon-only color="primary" (click)="deleteEvent(event)">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
CSS:
.scroll-content {
background-color: #ecf0f1;
display: flex !important;
justify-content: center;
}
ion-list {
width: 90%;
}
ion-item-sliding {
margin-top: 20px;
border-radius: 20px;
}
ion-item {
border: none !important;
font-weight: bold !important;
}
You can try changing the following sass variables
$item-md-padding-end, $item-ios-padding-end
They're set to 16px in
/src/themes/ionic.theme.<dark|default>.<ios|md|wp>.scss
This is my code, and I tried text-wrap , inside ion-header still can not show whole title.
<ion-header>
<ion-toolbar text-wrap color="danger">
<ion-buttons>
<button ion-button navPop icon-only>
<ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon>
</button>
</ion-buttons>
<ion-title>{{new.title}}</ion-title>
</ion-toolbar>
</ion-header>
Update
<ion-header>
<ion-toolbar color="danger">
<ion-buttons>
<button ion-button navPop icon-only>
<ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon>
</button>
</ion-buttons>
<ion-item color="danger" text-wrap>
<ion-title >{{new.title}}</ion-title>
</ion-item>
</ion-toolbar>
</ion-header>
I tried add ion-item there, but still not working for me.
Update 2
.ios .toolbar-title {
text-overflow: inherit;
white-space: normal;
text-align: left;
font-size:1.3em;
}
.md .toolbar-title {
text-overflow: inherit;
white-space: normal;
text-align: left;
font-size:1.3em;
}
Pls update your css file as below :
.toolbar-title {
text-overflow: inherit;
white-space: normal;
}
Edited:
Or
.toolbar-title {
text-overflow: unset;
white-space: unset;
}
A little neater than Finesse's answer (for Ionic 5):
<ion-title>
<div class="ion-text-wrap">
{{new.title}}
</div>
</ion-title>
Add an extra wrapper to your <ion-title> content to enable the wrapping:
<ion-title>
<div style="white-space: normal;">
{{new.title}}
</div>
</ion-title>
Additionally, if you want the title to extend the header when there is too much text, add the following CSS code:
ion-title {
position: static;
}
I have a page if its native storage is empty a div arises, that div has input field when i try to enter data to that ion-input keyboard pushes up along with the footer bar.
<ion-content>
<div>...........</div>
</ion-content>
<ion-footer class="bottom_bar">
<ion-row > <ion-col> ....</ion-col><ion-row>
<ion-row > <ion-col> ....</ion-col><ion-row>
</ion-footer>
in my css
.bottom_bar
{
position: fixed;
bottom: 2vh;
width: 100%;
}
Try below default classes
<ion-content>
<button fab fab-left fab-bottom danger fab-fixed>
<ion-icon name="add"></ion-icon>
</button>
<ion-fixed class="fixed-div">
<button fab fab-right fab-bottom dark>
<ion-icon name="add"></ion-icon>
</button>
</ion-fixed>
<style>
.fixed-div {
right: 0;
bottom: 0;
}
</style>
I have a list of ion-items with an icon followed by text. When the icon size is smaller as seen on the image below, the text seems to vertically align itself to the center of the ion-item. But when the icon is bigger, the alignment is a bit off.
This is all I've added:
<ion-item>
<ion-icon class="icon ion-ios-clock-outline"></ion-icon>
Recent
</ion-item>
And the CSS:
.icon {
font-size: 35px;
color: #ffC977;
}
How can I fix this. I tried using vertical-align, align-item and align-self. None of them worked.
Try this. Add a <span> element to the text, vertical-align only works with elements inline side by side :
CSS
.icon {
display: inline-block;
font-size: 35px;
color: #ffC977;
vertical-align: middle;
}
.text{
display: inline-block;
vertical-align: middle;
}
HTML
<ion-item>
<ion-icon class="icon ion-ios-clock-outline"></ion-icon>
<span class="text">Recent</span>
</ion-item>
Actually Ionic does that to you. But you need to inform where the elements will be with item-start, item-end, etc.
Just set your code like this:
<ion-item>
<ion-icon item-start name="ion-ios-clock-outline" class="icon"></ion-icon>
Recent
</ion-item>
<span style="font-size: 18px;vertical-align: middle !important;">
<ion-icon name="location" class="location-icon"></ion-icon>
</span>
<span style="height:80px !important;">
<b style="font-size: 18px;vertical-align: middle !important;">Port Louis, MU</b>
</span>
Using padding-vertical css utilities can bring the same result.
A list of css utilities for Ionic can be seen here: https://ionicframework.com/docs/theming/css-utilities/
<ion-item>
<ion-row>
<ion-col width-25>
<ion-icon class="icon ion-ios-clock-outline"></ion-icon>
</ion-col>
<ion-col width-75 padding-vertical>
Recent
</ion-col>
</ion-row>
</ion-item>
Please update your following CSS Class. Also you can move your text to a label tag and give the vertical-align middle for the label tag as well.
CSS
.icon {
font-size: 35px;
color: #ffC977;
vertical-align: middle;
}
label{
vertical-align: middle;
}
HTML
<ion-item>
<ion-icon class="icon ion-ios-clock-outline"></ion-icon>
<label>Recent</label>
</ion-item>