In my IONIC 4 application I am trying to vertical-align a div inside an ion-row / ion-col element. This kinda works but the second ion-col, which has an ion-icon inside it, messes up the height of the row (which is visible by it's borders).
So I have the following html setup (only showing the bit that matters):
<ion-content>
<ion-row class="top-icons ion-text-center">
<ion-col class="ion-padding">
<div class="element-color" [style.backgroundColor]="getColorString(el)"></div>
</ion-col>
<ion-col class="ion-padding">
<ion-icon name="warning" color="danger" *ngIf="el.IsCcp"></ion-icon>
<ion-icon name="cog" *ngIf="!el.IsCcp"></ion-icon>
</ion-col>
</ion-row>
.. Other stuff
The sccs of the html:
.top-icons > ion-col {
border-top: 1px solid var(--ion-color-lightGray);
border-bottom: 1px solid var(--ion-color-lightGray);
.element-color {
width: 22px;
height: 22px;
border-radius: 7px;
margin: 0 auto;
}
ion-icon {
font-size: 1.7em;
padding-top: 2px;
}
&:first-child {
border-right: 1px solid var(--ion-color-lightGray);
}
}
.title {
font-size: 1.1rem;
}
p {
margin: 5px 0;
font-size: 0.9rem;
}
Which results in the following, the problem however is that the div is not vertical-aligned in the ion-col element, while the ion-icon is:
When taking a closer look it gets obvious that the div is not getting vertically aligned in the ion-col:
I thought I could fix this with the IONIC css utility ion-align-items-center on the ion-row:
<ion-content>
<ion-row class="top-icons ion-text-center ion-align-items-center">
<ion-col class="ion-padding">
<div class="element-color" [style.backgroundColor]="getColorString(el)"></div>
</ion-col>
<ion-col class="ion-padding">
<ion-icon name="warning" color="danger" *ngIf="el.IsCcp"></ion-icon>
<ion-icon name="cog" *ngIf="!el.IsCcp"></ion-icon>
</ion-col>
</ion-row>
.. Other stuff
Which results in the following, but unfortunately introduces a new problem:
So now the div is vertical aligned but the ion-col itself has been moved in comparison to the other ion-col:
This can be fixed by changing the font-size of the ion-icon back to its original font but this makes the icon way to small.. :
Any ideas how to get this to work?
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 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.
Is there a way to make the background of an ionic 2 <ion-item> be transparent?
I have tried this CSS but it doesn't make the item transparent:
.list .item, .item-content .item-inner .item-block .item-ios
{
background: transparent !important;
}
ADDED CODE
My HTML looks like this:
<ion-content class="pu-my-plans-background">
<div *ngIf="hasPlans">
<ion-list no-lines class="pu-item-list">
<!--<ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)">-->
<ion-item-sliding *ngFor="let plan of plans; let i = index" >
<ion-item class="pu-section-list-item pu-my-plans-item" (click)="editPlan(plan.id, plan.rev, plan.title, i)">
{{ plan.title }}
<br>
<span class="pu-my-plans-plan-date">{{ plan.updated}}</span>
<button *ngIf="plan.important" ion-button clear item-right>
<ion-icon name="ios-alert-outline"></ion-icon>
</button>
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger" (click)="deletePlan(plan.id, plan.rev)">
<ion-icon name="delete"></ion-icon>
Delete
</button>
</ion-item-options>
</ion-item-sliding>
<!--</ion-item-group>-->
</ion-list>
</div>
</ion-content>
And my CSS like this:
page-my-plans {
}
.pu-my-plans-plus-circle {
display: block;
//border: 2px solid white;
background-color: $pu-orange;
border-radius: 50%;
height: 38px;
width: 38px;
}
.pu-my-plans-plus-circle span {
font-size: 38px;
font-weight: 100;
color: white;
position: absolute;
top: -7px;
left: 8.5px;
}
.pu-plan-addButton {
font-size: 30px;
margin-right: 14px;
margin-top:-2px;
}
.pu-section-list-item{
color: white;
background-color: black;
font-weight:$pu-item-font-weight;
font-size:$pu-item-font-size;
padding-left:20px;
padding-right:0px;
}
.item{
background: transparent !important
}
// THEMING CSS
// ===========
//
.pu-my-plans-background {
background-image: url("../assets/img/my_plan_bg#2x.png");
background-size: cover !important;
}
.pu-my-plans-item {
border-style:solid;
border-bottom-width: 2px;
border-bottom-color: $pu-orange;
}
.pu-my-plans-plan-date {
color: $pu-orange;
font-size: 11px;
font-weight: 200;
}
I have tried every combination of styling the ionic 2 items as I can think of but the best I can get with this is to get a white background behind the ion-item. The ion-content has an image background but I can't get to see this through the ion-item.
Here is a solution in Ionic 4:
HTML:
<ion-list class="bg-transparent">
<ion-item color="none" lines="none">
Some random text
</ion-item>
<ion-item color="none" lines="none">
Some random text
</ion-item>
</ion-list>
CSS:
.bg-transparent {
background: transparent;
}
Important things to note:
Set background color of the main list to transparent by applying the class and adding CSS as shown.
Add the color="none" attribute to each of the ion-item.
lines="none" remove the lines under each of the ion-item
That should do it!
For Android
.item-md {
background: transparent;
}
For iOS
.item-ios {
background: transparent;
}
Try this in Ionic 5 using CSS Custom Properties.
For ion-item
ion-item {
--ion-item-background: transparent;
}
For ion-list
ion-list {
--ion-item-background: transparent;
}
For the ionic 2 item sliding background color you can change the main sass variable
$item-ios-sliding-content-background(transprent);
$item-md-sliding-content-background(transprent);
In your src -> theme -> variables.scss file
you can find all the variables here
You are using sliding item. Try using the below code
.pu-item-list ion-item-sliding{
background: transparent !important;
}
Try this:
<ion-item color="transparent">
</ion-item>
This worked for me.
ion-item {
--ion-item-background: transparent;
box-shadow: none !important;
}
ion-list {
--ion-item-background: transparent;
box-shadow: none !important;
}
Create a new variable in variable.scss like this:
--ion-color-transparent: rgba(0, 0, 0, 0.0);
and use it like this:
<ion-item color="transparent" padding="0px"><ion-input type="email" placeholder="username"></ion-input></ion-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>