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/
Related
I'm developing a new app using Ionic 3 but I would like to change the border color from the header but I don't know how to do it.
Any help please?
My HTML file:
<ion-header no-shadow class="nav-content">
<ion-navbar hideBackButton>
<ion-title>
MEDITACIÓN
</ion-title>
<ion-buttons end>
<button ion-button icon-only>
<ion-icon name="close" color="third"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="content">
</ion-content>
My sass file:
page-meditation {
.scroll-content {
overflow: hidden;
}
.toolbar {
border-color: red !important;
// box-shadow: 0px 1px 0px #ff9100!important;
}
.content {
background-color: color($colors, primary, base);
}
}
If I put border-color it doesn't work. And if a put box-shadow, works but the line is draw below the other border and thicker with 1px.
The structure of a Ionic app's header looks like this :
<ion-header>
<ion-navbar>
<ion-title>Page1</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-title>Subheader</ion-title>
</ion-toolbar>
</ion-header>
css
.toolbar{
border-color: red;
}
In the following image the ion-title painting is not properly aligned at the center,How to align at the exact center
home.html
<ion-header>
<ion-navbar>
<ion-title> <p align="center" style="color:white;">{{service.name}}</p>
</ion-title>
</ion-navbar>
</ion-header>
Ionic CSS attributes are deprecated.
Replace:
'<ion-title text-center>'
With:
'<ion-title class="ion-text-center">'
just add text-center attribute to your ion-navbar tag or ion-title tag, like this:
<ion-navbar text-center>
<ion-title>
Some text...
</ion-title>
</ion-navbar>
or
<ion-navbar>
<ion-title text-center>
Some text...
</ion-title>
</ion-navbar>
I just had this happen in our app / converting from Ionic3 -> Ionic6, and it bothered me that none of the answers really seemed to understand that (in the OP's example) 'Painting' should be centered in the center of the app / screen, NOT centered in the remaining space not taken up by whatever buttons/text may or may not exist in slot="start" or slot="end".
This isn't perfect, but it works nicely.
ion-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
<ion-title text-center>
<p class="centered-p">Title</p>
</ion-title>
.md .centered-p {
text-align: center;
margin-left: -15%
}
it is not perfect but working fine for me in both android & IOS
In scss of your page paste the following code:
ion-title { text-align: center !important; }
It worked for me.
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'm very new to Ionic and I have a simple question that I couldn't find in the documentation.
Is there any way to use Ionic classes to simply align the content which is now below the image, to the left?
The code I currently have is:
<ion-item class="item-left item-text-wrap">
<img src="http://placehold.it/100x150" alt="Poster">
<h2>Title</h2>
<h3>Something else</h3>
Thanks!
See this demo: http://play.ionic.io/app/e8f309f71714
You dont need to do any styling for this, ionic thumbnails will be of best use to you, see here Documentation.
This is how you will do
<ion-item class="item-thumbnail-left item-text-wrap">
<img src="http://placehold.it/100x150" alt="Poster" class="customized-image">
<h2>Title</h2>
<h2>Something else</h2>
<p>your large content goes here</p>
</ion-item>
item-thumbnail-left class is provided by ionic. You will only have to make some style class to make image rectangle. Because by default image will be square.This is how class can look like
.customized-image{
max-height: 100px !important;
}
customized-image class should be added to image tag.That is it, no more custom styling.
You Can acomplish it using inline-block
.item-left img {
display: inline-block;
width: 33%; /* or waterver you need = w1 */
vertical-align: top;
}
.item-left h2,.item-left h3 {
display:inline-block;
width: 66%; /* (100-w1)% */
vertical-align: top;
}