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;
}
Related
Im facing a little issue with rows and the space between of them. On the other hand, im try too setup the images to filled (in the same size) the initial home page (with navbar and tabspage).
screenshot
and my code for now:
page.html
<ion-content>
<ion-row>
<ion-col no-padding (click)="openPage1()">
<p class="image-title">1</p>
<img src="assets/imgs/2560x1440.png" />
</ion-col>
</ion-row>
<ion-row>
<ion-col no-padding (click)="openPage2()">
<p class="image-title">2</p>
<img src="assets/imgs/2560x1440.png" />
</ion-col>
</ion-row>
<ion-row>
<ion-col no-padding (click)="openPage3()">
<p class="image-title">3</p>
<img src="assets/imgs/2560x1440.png" />
</ion-col>
</ion-row>
</ion-content>
page.scss:
page-tests1 {
}
ion-row {
text-align: center;
}
.image-title {
position: absolute;
top: 25%;
font-size: 2em;
width: 100%;
font-weight: bold;
color: white;
}
Maybe you haven't use reset css. Please add this css for image because this space from img default style.
Or i will suggest to use global reset
or you can use eric meyer reset
img {
display: inline-block;
vertical-align: middle;
}
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
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 want to make ion-item allow overflow of it's contents. I tried the following css (scss to be specific)
ion-item{
overflow: visible;
height : 220px;
}
but it doesn't seem to work.
I also tried adding overflow : visible property to the elements generated by ion-item (like .item-inner, .item-block), but that didn't work too.
Edit (Adding code snippets)
home.html
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div class="rel-container">
<ion-list>
<ion-item>
<div>Name1</div>
<div>Name2</div>
<div>Lorem ipsum dolor</div>
<div class="error-container">
<div class="error">a quick brown fox</div>
</div>
</ion-item>
</ion-list>
</div>
</ion-content>
home.scss
ion-item,ion-list,ion-label, .item-md, .item-block, .item, .item-inner, .input-wrapper, .rel-container, .button-effect{
overflow: visible;
}
page-home {
ion-item{
height: 9rem;
}
.error-container{
padding: 5px;
background: red;
color: white;
position: absolute;
z-index: 400;
}
.rel-container{
position: relative;
}
}
Before I answer, here are some miscelleneous details
Ionic v3.3.0
Angular v4.1.2
The problem that overflow was not working as expected, was the CSS property contain : content; applied by Ionic for .item.
(More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/contain)
To solve this I just had to override it with
.item {
contain:none;
}
Peace! ✌️✌️✌️
You can just add the text-wrap directive:
<ion-item text-wrap>
Multiline text that should wrap when it is too long
to fit on one line in the item.
</ion-item>
https://ionicframework.com/docs/api/components/item/Item/
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>