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.
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;
}
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 need to resize the header, how can I do it? I tried with a few css styles but it did not work.
I want to achieve the small one
Thanks!
edit: This is my code, hope this help...
thanks again and let me know if you need more details
............................................................................................................
page-home {
ion-navbar{
width: 100%;
}
ion-title img{
padding-left: 10px;
}
img.logo{
padding-left: 110px;
height: 20px;
}
p.title{
font-size: 15px!important;
padding-top: 10px;
padding-left: 110px;
}
ion-content{
margin-left: 100px;;
margin-top: 40px;
}
ion-grid{
text-align: center;
}
ion-row.header-row{
text-align: center;
font-weight: bold;
}
ion-col.header-col{
background-color: #eee;
border:1px solid #ddd!important;
}
ion-col.info-col{
background-color: #fff;
border:1px solid #ddd!important;
}
ion-col.col-align{
padding-top: 14px;
}
.button{
width: 90px;
}
}
<ion-header>
<ion-navbar>
<ion-title>
<img alt="logo" class="logo" height="20" src="../assets/img/image.png">
</ion-title>
</ion-navbar>
<ion-toolbar class="toolbar-header" color="dark">
<ion-title>
<p class="title" text-wrap>Events</p>
</ion-title>
</ion-toolbar>
</ion-header>
<!--End Header-->
<ion-content padding>
<ion-grid>
<ion-row class="header-row">
<ion-col class="header-col" col-1>
EVENTS
</ion-col>
<ion-col class="header-col" col-2>
ORIGIN
</ion-col>
<ion-col class="header-col" col-2>
DESTINATION
</ion-col>
<ion-col class="header-col" col-1>
ERROR
</ion-col>
<ion-col class="header-col" col-2>
FIRST EVENT
</ion-col>
<ion-col class="header-col" col-2>
LATEST EVENT
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
in ionic 4 use this
ion-toolbar, ion-header {
--min-height: 48px;
}
Just declare your scss details as shown below.If you do so it'll get the precedence of styles over the default ionic once.
.scss
.md,
.ios,
.wp {
page-home {
ion-header {
height: 40px;//by default 56px
}
}
}
In my case the above answer did not work, I could not remove the dead space above/below the title in the ion-header however the following did the trick perhaps it will help someone visiting here.
ion-navbar.toolbar {
min-height: 30px;
}
To change it on all pages you need to use the sass variables that ionic documentation provides:
I use to do it exactly as it shows on the reference link above. These are the sass variables:
//toolbar settings
$toolbar-ios-title-font-size: 1.3rem;
$toolbar-md-title-font-size: 1.4rem;
$toolbar-wp-title-font-size: 1.1rem;
$toolbar-md-height: 1.3rem;
where "md" stands for material design
"ios" is explicit. "wp" goes
for Windows Phone.
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'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;
}