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