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?
So I am building a PWA using the Ionic PWA ToolKit. Now it displays as it should on my mac but I recently tried it on 3 different laptops running windows and everything just seemed zoomed in.
This is how it appears on my mac and should appear:
And this is how it displays on windows (other laptops):
This is my CSS:
/*
* =============================================================================================
* Content Section
* =============================================================================================
*/
app-bus-home {
background: url(../assets/img/banners/bus.jpg) no-repeat bottom/cover;
min-height: 730px;
text-align: left;
color: #ffffff;
}
app-bus-home ion-grid {
max-width: 1200px;
}
app-bus-home ion-text h1 {
margin-top: 90px;
}
app-bus-home h1 {
font-size: 60px;
}
app-bus-home ion-img.bus {
width: 500px;
margin-top: 65px;
}
date-picker {
width: 500px;
margin-top: 25px;
display: none;
position: absolute;
z-index: 2000;
top: 25px;
overflow: hidden;
}
And this is the JSX layout:
render() {
return [
<ion-grid align-items-start>
<ion-row>
<ion-col>
<ion-text color="light">
<h1 class="font-light animated slideInLeft">BUS <strong class="font-black">TICKETS</strong></h1>
<p class="font-light animated slideInLeft">xxxxxx</p>
<p class="font-light animated slideInLeft">xxxxxx</p>
</ion-text>
<ion-img class="bus animated zoomIn" src="../assets/img/bus.png" />
</ion-col>
<ion-col size="4" padding>
<bus-search class="animated slideInRight"></bus-search>
<date-picker availableDates={this.availableDates} actionUrl={this.actionUrl} showHeader={true} showButtons={true} class="animated"></date-picker>
</ion-col>
</ion-row>
</ion-grid>
];
}
Your page isn't responsive, so it means that you can't see it in the same way on different devices. To optimize the visualization on several devices, i suggest you to use '%' instead of 'px' in your css.
In alternative you can use libraries like Bootsrap to do it. Bootstrap offers lot of classes to make your page responsive. Usually I use the following documentation: https://www.w3schools.com/bootstrap4/default.asp .
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
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>.