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?
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;
}
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>
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>.