In ionic we can add ion-navbar and ion-toolbar in ion-header but I want to ad some customized menu bar to my application in top of the ion-content for that I add ion row and add z-index and position CSS for that it works in browser but when it build that menu-bar change position it is not fixed in top. I guess that after I fixed the position user cannot scroll the ion-content when scrolling the position of the menu is changes. How can I add customize menu bar to the top of ion-content
this image shows the menu bar in gray color
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row style="position: fixed;height: 50px;background: #444444">
<button ion-button small>test btn</button>
</ion-row>
<ion-row *ngFor="let item of data" style="background: #eee;border: 1px solid #888;height: 40px">
{{item.name}} - {{item.id}}
</ion-row>
</ion-grid>
</ion-content>
you can add a ion-toolbar inside the ion-content tag just like you would in the header and it will work the same, you just need to add a position:fixed to the toolbar
<ion-toolbar style="position:fixed;">
<ion-buttons start>
<button ion-button icon-only color="royal">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-title>Send To...</ion-title>
<ion-buttons end>
<button ion-button icon-only color="royal">
<ion-icon name="person-add"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
I think you need this:
<ion-header>
<ion-navbar>
<ion-title>title</ion-title>
</ion-navbar>
<ion-grid style="position: fixed; height: 50px; background: #444444">
<ion-row>
<ion-col>
</ion-col>
</ion-row>
</ion-grid>
</ion-header>
<ion-content style="top: 50px;">
</ion-content>
Related
I'm trying to align a message input box to the bottom of the page, but I can't seem to get it working. I've tried using align-self-end and making a css class for ion-footer.
<ion-content>
<ion-footer align-self-end>
<ion-toolbar color="light">
<ion-row align-self-end>
<ion-col size="10">
<ion-textarea auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
</ion-col>
<ion-col size="2">
<ion-button expand="block" fill="clear" color="primary" [disabled]="message === ''" class="msg-btn"
(click)="sendMessage()">
<ion-icon name="paper-plane"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-footer>
</ion-content>
ion-footer{
display: flex;
align-items: flex-end;
margin: auto;
padding-top: .5em;
padding-bottom: .5em;
}
<ion-footer> is not meant to go inside <ion-content>
The structure of html file should be
<ion-header>
</ion-header>
<ion-content>
</ion-content>
<ion-footer>
</ion-footer>
In your case you want to show another element towards the bottom of the content, you can insert textarea like this..Do not put ion-row inside the ion-toolbar.
<ion-content>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-textarea maxRows="4" [(ngModel)]="message" placeholder="Write a message"></ion-textarea>
<ion-icon name="paper-plane" slot="end"></ion-icon>
</ion-toolbar>
</ion-footer>
another method would be
.support{
margin: auto;
position: absolute;
text-align: center;
bottom: 20px;
width: 100%;
}
<ion-content padding>
... other elements
<div class="support">
<p>some text</p>
</div>
</ion-content>
I am migrating my Ionic 3 project to Ionic 4 and stumbled upon a problem with a page-specific background image which worked perfectly in Ionic 3 but not in Ionic 4.
The page has a image which should cover the full page, the page however has a ion-header and ion-footer component as well.
In my Ionic 3 the html looked as following:
<ion-header [ngClass]="'no-shadow'">
<ion-navbar transparent>
<ion-buttons start>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-row class="logo-row" *ngIf="isKeyboardHidden">
<ion-col col-8 offset-2 padding text-center>
<img id="logo" src="assets/img/logo-dia-positive.png">
</ion-col>
</ion-row>
<form #f="ngForm" (ngSubmit)="onSubmit()">
<ion-row>
<ion-col>
<p style="height: 16px"></p>
</ion-col>
</ion-row>
<ion-list no-lines class="form-inputs">
<ion-item>
<ion-label icon-only>
<ion-icon name="person"></ion-icon>
</ion-label>
<ion-input
type="text"
name="username"
[(ngModel)]="account.username"
[placeholder]="'USERNAME' | translate"
required></ion-input>
</ion-item>
<ion-item>
<ion-label icon-only>
<ion-icon name="unlock"></ion-icon>
</ion-label>
<ion-input
type="password"
name="password"
[(ngModel)]="account.password"
[placeholder]="'PASSWORD' | translate"
required></ion-input>
</ion-item>
</ion-list>
<ion-row>
<ion-col col-10 offset-1>
<button
ion-button
block
[disabled]="!f.valid || isLoading">
{{'LOGIN' | translate}}
</button>
</ion-col>
</ion-row>
</form>
</ion-content>
<ion-footer *ngIf="isKeyboardHidden">
<ion-row>
<ion-col text-center>
<p class="light-gray">
<span class="bold">
<a class="default-text"
Some Footer Text
</a>
</span>
</p>
</ion-col>
</ion-row>
</ion-footer>
With the scss:
page-login {
.content {
background: url('../assets/img/background.png') no-repeat;
background-size: cover;
#logo {
padding-top: 5rem;
}
form {
position: absolute;
bottom: 0;
width: 100%;
.logo-row {
margin-bottom: 40%;
}
.form-inputs {
.label-ios {
width: 60px;
max-width: 60px;
}
}
}
}
}
The result:
In Ionic 4 the header and footer behave differently, for some reason I have to make the ion-tool bar transparent in the scss, and move both the ion-header and ion-footer within the ion-content to make the image overlap both, the scss:
ion-toolbar {
--background: transparent;
//--ion-toolbar-text-color: white;
//--ion-color-base: transparent !important;
}
ion-content {
--background: url('../../../assets/img/background.png') no-repeat center/cover fixed;
--background-size: cover;
#logo {
padding-top: 5rem;
}
form {
--position: absolute;
--bottom: 0;
--width: 100%;
// rest of scss..
}
}
The html:
<ion-content>
<ion-header no-border [ngClass]="'no-shadow'">
<ion-toolbar slot="fixed">
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-row class="logo-row" *ngIf="isKeyboardHidden">
<ion-col size="8" offset="2" class="ion-padding ion-text-center">
<img id="logo" src="assets/img/logo-dia-positive.png">
</ion-col>
</ion-row>
<form #f="ngForm" (ngSubmit)="onSubmit()">
<ion-row>
<ion-col>
<p style="height: 16px"></p>
</ion-col>
</ion-row>
<ion-list no-lines class="form-inputs">
<ion-item>
<ion-label>
<ion-icon slot="icon-only" name="person"></ion-icon>
</ion-label>
<ion-input
type="text"
name="username"
[(ngModel)]="account.username"
[placeholder]="'USERNAME' | translate"
required></ion-input>
</ion-item>
<ion-item>
<ion-label>
<ion-icon slot="icon-only" name="unlock"></ion-icon>
</ion-label>
<ion-input
type="password"
name="password"
[(ngModel)]="account.password"
[placeholder]="'PASSWORD' | translate"
required></ion-input>
</ion-item>
</ion-list>
<ion-row>
<ion-col size="10" offset="1">
<ion-button
block
[disabled]="!f.valid || isLoading">
{{'LOGIN' | translate}}
</ion-button>
</ion-col>
</ion-row>
</form>
<ion-footer transparent *ngIf="isKeyboardHidden">
<ion-row>
<ion-col class="ion-text-center">
<p class="light-gray">
{{'DEVELOPED_BY' | translate}}
<span class="bold">
Some Text
</span>
</p>
</ion-col>
</ion-row>
</ion-footer>
</ion-content>
This does not seem to make sense to me, there must be a way to move the ion-header and ion-footer outside of the ion-content in the html, with keeping the image overlapping both?
If I move both back out, the result looks as following, and thus wrong:
UPDATE
The proposed answer by #Sergey Rudenko works to some extend, the background image is displayed correctly but the disadvantage is that the position: absolute on the footer does not pushes the form element above the footer, instead the form element is positioned above / over the footer:
Sorry if I am not fully understanding your context, but can't you do something like this:
Template:
<ion-header style="position: absolute; left: 0; top: 0; right: 0" no-border>
<ion-toolbar>
<ion-title>
Ionic 4 template
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
<ion-footer style="position: absolute; left: 0; bottom: 0; right: 0" no-border>
<ion-toolbar>
<ion-button expand="block">Hit Me</ion-button>
</ion-toolbar>
</ion-footer>
SCSS:
ion-toolbar {
--background: transparent;
--ion-color-base: transparent !important;
}
ion-content {
--background: url('https://via.placeholder.com/150') no-repeat center/cover fixed;
--background-size: cover;
}
ion-header, ion-footer {
border: 0px !important;
border-bottom-color: transparent !important;
background-image: none !important;
border-bottom: none !important;
}
Depending on your use case maybe not using "absolute" but "fixed" position etc?
I would like to have my text in the middle of an image inside a navbar. I have this code but the text aligns horizontally with the circle image. Your help is greatly appreciated.
<ion-header>
<ion-navbar>
<div *ngIf="showHeaderInfo">
<ion-title>
<div style="background-color: #4989ff; color: whitesmoke;" >
<img class="circle-pic-header" style="margin-top: 5px; margin-left: 5px;" src="{{userInfo?.image}}" />
{{ userInfo?.firstName }} {{ userInfo?.lastName }}
</div>
</ion-title>
</div>
<ion-buttons end>
<button ion-button icon-only (click)="logOutHandler()">
<ion-icon name="log-out"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
You can Add CSS property on image to vertically align text at the center like this
Make sure that there is no display:block on image element
.circle-pic-header{vertical-align:middle}
You can find JSFiddle demo here
I'm creating a chat and my problem is that the div that has the messages inside it I put a scroll, but I can not keep it under everything.
This is the view code and styles:
<ion-grid>
<ion-row>
<ion-col col-12>
<button ion-button block color="success" style="text-transform: none" (click)="seeMembers()">See members</button>
</ion-col>
<ion-col col-12 class="div_chat" #div_theme>
<ion-list insert>
<button ion-item>
<p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
</button>
</ion-list>
<h3 *ngIf="themeDB == false" text-center><strong>There are no new Topics</strong></h3>
</ion-col>
</ion-row>
</ion-grid>
This is my stylesheet
page-see-theme{
.div_chat{
width: 100%;
height: 300px;
overflow-y: auto;
}
}
Any idea is very useful, thanks for your help
I have a page which simply looks like this:
<ion-navbar *navbar>
<ion-title>My List</ion-title>
</ion-navbar>
<ion-content class="has-header">
<ion-list>
<ion-item *ngFor="#item of items">
<ion-toolbar>
<ion-buttons end>
<button>Something</button>
</ion-buttons>
</ion-toolbar>
<img [src]="slide.image" class="slide-image"/>
<h2 class="slide-title" [innerHTML]="slide.title"></h2>
<p [innerHTML]="slide.description"></p>
</ion-item>
</ion-list>
</ion-content>
Let says there are 100 items. I would like each item to take the full height. So you should not be able to see the next or previous item at all unless you scroll. I would like the height of every item to be the same which would be the size of ion-content I guess. How can I do this? I have tried playing around with height, min-height, positioning, flex, but have not been able to make it work?
You can use vh units in modern browsers. Support is pretty good.
ion-content {background: #f6f6b2;}
ion-content + ion-content {background: #b3f4b3;}
ion-content {display: block; height: 100vh;}
<ion-content class="has-header">
<ion-list>
<ion-item *ngFor="#item of items">
<ion-toolbar>
<ion-buttons end>
<button>Something</button>
</ion-buttons>
</ion-toolbar>
<img [src]="slide.image" class="slide-image"/>
<h2 class="slide-title" [innerHTML]="slide.title"></h2>
<p [innerHTML]="slide.description"></p>
</ion-item>
</ion-list>
</ion-content>
<ion-content class="has-header">
<ion-list>
<ion-item *ngFor="#item of items">
<ion-toolbar>
<ion-buttons end>
<button>Something</button>
</ion-buttons>
</ion-toolbar>
<img [src]="slide.image" class="slide-image"/>
<h2 class="slide-title" [innerHTML]="slide.title"></h2>
<p [innerHTML]="slide.description"></p>
</ion-item>
</ion-list>
</ion-content>