I need your help. I want to make the same header for all my application, so in app.component.html I prescribe ion_toolbar and ion-header before ion-router-outlet. However, I have a problem that this header of mine overlaps the content I have in the ion-router-outlet. I'm trying for the ion-toolbar to give margin-bottom: auto so that there are automatic deviations, but it doesn't react to that. Tell me, what is my mistake, how to make a hat and that it does not overlap the content? Thanks
app.component.html
<ion-app>
<ion-toolbar>
<ion-header>
<div>header</div>
</ion-header>
</ion-toolbar>
<ion-router-outlet></ion-router-outlet>
</ion-app>
app.component.scss
ion-toolbar {
height: 75px;
--margin-bottom: auto;
}
Related
I am using Ionic 6 / Angular and have this html in a component:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Tab 1
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 1</ion-title>
</ion-toolbar>
</ion-header>
<app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>
In chrome mobile view it looks good but on my mobile I can only see half the header.
Here is a screenshot:
screenshot here
What is the problem?
This element needs a little padding.
You have to add a the variable ion-safe-area-top in the "variables.scss" file.
:root {
...
--ion-safe-area-bottom: 22px;
}
Also you need to add styles for the first ion-toolbar inside ion-header element.
ion-header ion-toolbar:first-of-type{
padding-top: var(--ion-safe-area-top, 0);
}
Not sure what the exact issue is but I was able to resolve it by
Creating a fresh project on v6 -> Copy the files from the old project across to the new -> rebuild the android app and the issue disappeared.
I had the same problem and this solved the issue for me.
As this issue only happens with Andriod, I defined a variabel to detect if the device is Android. If Yes then apply a padding to the header
In app.component.ts
if (this.platform.platforms().includes("android"))
this.isAndroid = true
In app.component.html
<ion-header [translucent]="true" [class]="isAndroid? 'android-header' : ''">
In app.component.css
.android-header {
padding-top: 20px;
}
I have a mobile app/website (in Ionic 3.25) under construction and wanted to support the desktop web browser experience without wasting all that screen space. I stumbled across Ion-Split-Pane. It seemed perfect from the documentation, allowing me to pop open the sidemenu as a full menu when a large screen was used. I set the code as recommended in the app.html file:
<ion-split-pane when="md">
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>
The behavior I'm getting when using Ionic Serve is baffling. When I use a large screen (above somewhere around 922 pixels wide), I get a three pane experience, with a bunch of whitespace containing nothing in the far right. This was surprising, since I thought the app would use the available space:
When I then shrink below that size, the entire website/app disappears. The elements are still in the html, but nothing is drawn to the screen.
This behavior is so far from the documentation that I must have something wrong, but I'm not certain what. Anyone know how I could get this panel working?
After working on this for a while, I discovered my problem. It isn't mentioned explicitly in the documentation, so I'll post the answer here in case anyone else runs into it.
When converting a side-menu project to use Ion-Split-Pane, the content section needs to have the main keyword added to the <ion-nav> object. #content and [root] are not enough.
The amended code:
<ion-split-pane when="md">
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" main #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>
Without that line, the entire application is thrown into the 'menu' pane and simply disappears when going to the mobile view.
I want the user to be able to click and drag the scrollbar on the side of the screen while using my ionic app. Is this possible?
Ionic has a built in component called ion-scroll. It does what you have described and more. You can implement it inside your HTML like so.
<ion-scroll
scrollX="true"
scrollY="true">
</ion-scroll>
For me the solution was to add isBrowser variable to the controller which determined if this is mobile (no scroll bar) or desktop (draggable scrollbar).
<ion-content data-ng-class="{ isBrowserView : appCtrl.isBrowser }"
overflow-scroll="{{ appCtrl.isBrowser }}">
...
</ion-content>
And I added the following to me scss file:
.isBrowserView {
overflow-y: auto !important;
}
.isBrowserView .scroll-bar-indicator {
display: none;
}
*If you always want the scrollbar then do not worry about setting the value on a controller. Like so:
<ion-content class="isBrowserView"
overflow-scroll="true">
...
</ion-content>
I have a very simple app so far, but I can't figure out how to fix the overlapping of the content (header on top of the content). I have created a component header that contains the header as the name suggest.
header.html
<ion-header>
<ion-navbar color="dark">
<ion-title>
Some Title
</ion-title>
</ion-navbar>
</ion-header>
I have been trying to use it on different pages, but it always overlaps the content of the page.
page.html
<app-header></app-header>
<ion-content padding>
<h1>Some Page</h1>
</ion-content>
I have tried using div tag instead of ion-content, and also tried using class="has-header", but nothing seems to be working. Although, if don't use the header as a component such as the following, it works fine. But I want to use the header as a component so that I can reuse it on other pages.
page.html (don't want to have it like this)
<ion-header>
<ion-navbar color="dark">
<ion-title>
Some Title
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h1>Some Page</h1>
</ion-content>
As pointed out in this thread of Ionic official forum by #brandyshea of Ionic team, the thing is that in one page you can only have 3 kind of tags as top tags, everything else must go inside one of them. The 3 tags are:
<ion-header></ion-header>
<ion-content></ion-content>
<ion-footer></ion-footer>
I was trying to organize my app as #Hafiz and stumbled on the same problem, the solution has been to put my custom header (<ew-navigazione-top>) inside <ion-header> in each page.
<ion-header>
<ew-navigazione-top [ew_title]="navParams.get('label')" [ew_subtitle]="The subtitle"></ew-navigazione-top>
</ion-header>
P.S. This is the solution for Ionic 3. For previous versions on the same linked thread you can find other specific solutions.
try with below :
<app-header></app-header>
<ion-content style="margin-top:__px">
<h1>Some Page</h1>
</ion-content>
I want to have a fixed logo in the Ionic2 framework. I have transitions between pages and the header and pages gets slid in. I want to know if I can keep the header / logo a constant above anything on the page.
<ion-header>
<a (click)="goToRoot()" ><img src="assets/img/topBar-iPad.png" alt=""/></a>
</ion-header>
<ion-content padding>
</ion-content>
I have tried it with the toolbar this doesn't work either.
If you want put an image in header, you can use this code:
<ion-header>
<ion-navbar>
<ion-title>Title</ion-title>
<ion-buttons end>
<img height="35px" width="35px" src="assets/img/topBar-iPad.png">
</ion-buttons>
</ion-navbar>
</ion-header>
This might get a bit tricky if you app becomes a bit more complex over time, however what you can do is add your <ion-header> element to your app.html file found in src -> app.
That sets it at top level above the pages you are navigation to.
If your app does become complex over time where only in some cases you want the toolbar to be fixed at the top you might need to either create a custom component based on the element or pass in a *ngIf ( or [hidden]="") and then write logic to support its visibility.