When I scroll the page, it scroll the header too when it is on beginning of the page. And it scroll the tabs when I click on tab and scroll it.
I recorded the problem: https://youtu.be/GNJtqy9ZrDE
I already try some stuffs, like add css "overflow-y: hidden", I searched the problem but I couldn't find any solution.
I don't have any css modifying this ion-content or something else, only the default ionic 3 application.
"ionic": "^5.2.3",
"ionic-angular": "3.9.5",
"cordova-ios": "^5.0.1",
<ion-header>
<ion-navbar color="primary">
<ion-title>Leilões</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<!--MY CONTENT-->
</ion-content>
I have this exact same problem in other app, and I couldn't find solution too.
Add this line to your config.xml and then do a clean build and it should work as expected
<preference name="DisallowOverscroll" value="true"/>
Reference
Related
The ion-back-button does NOT show up to the right of the ion-menu-button. Why is that?
the ion-menu-button and the ion-title show properly and aligned on the same horizantal position.
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<!-- navigation button-->
<ion-menu-button></ion-menu-button>
<!-- optional back button-->
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
{{ pageTitle | translate}}
</ion-title>
</ion-toolbar>
</ion-header>
In the DOM inspector the CSS display attribute of the ion-back-button is set to none. Why would it set itself to none?
I used
this.navCtrl.navigateForward('/term/' + term);
to navigate to this page, thus I expect the back button to pick this up. Why is navigateForward not adding to the stack, which would make the ion-back-button show?
If there is no page in Stack then
<ion-back-button></ion-back-button>
will not show. If you want to show then You need to be added a specific page in "defaultHref" Attribute.
<ion-back-button defaultHref="logout"></ion-back-button>
you need to be learned from here
https://ionicframework.com/docs/api/back-button
It will not visible if there will be no previous overlay/page to show
So you can set css
ion-back-button {
display: block;
}
Then add click event on element
<ion-back-button (click)="close()">
<ion-icon name="close"></ion-icon>
</ion-back-button>
Add on .ts file
click() {
this.modalCtrl.dismiss();
}
For anyone who has this trouble, and the ion-back-button is still not appearing, check that you have the IonicModule imported in your page's module. It happened to me that I created a component for the ion-header and the ion-back-button was not appearing. It was because my ComponentsModule (the one that declares and exports all my components) had only the CommonsModule imported and not the IonicModule. So always check for the IonicModule in your imports. Otherwise the back button will not appear
Is it root page? if so ion-back-button will not show up.
Try adding the attribute defaultHref. For example: <ion-back-button defaultHref="home"></ion-back-button>. it should show up regardless of having no navigation stack.
So Ionic developers make life complicated, now (Ionic5) the attribute is called default-href and not defaultHref.
But still when clicking not loading to the href.
Workaround. I programmatically decide with the URI path. Drawback, if more detail pages are added to the app, they need to be added (e.g. in an array of back-button-qualifying paths).
<ion-button *ngIf="router.url.includes('/term/')"><ion-icon name="arrow-back"></ion-icon></ion-button>
Added the Router Object to the constructor of this component
constructor(public router: Router) { }
If someone still comes up with why the programmatic navigation does NOT add to the navigation stack - so that the back button would appear on the detail page - I gladly listen.
Just need to add the color in scss file to show up.
ion-back-button{
--color: black;
}
And also don't forget to indicate the href, adding it html file
<ion-buttons slot="start">
<ion-back-button defaultHref="YourRouteHere"></ion-back-button>
</ion-buttons>
Make sure you arrived to that page via a router link that modifies the route history. Otherwise the backbutton wont show because there is no recorded history of a previous route.
My issue was, the link i clicked which takes me to a page forward, had routerDirection="none". So there was no previous route so my back button didn't show.
Changing
<IonRouterLink routerDirection="none" routerLink={`/item/${item.id}`}>...</IonRouterLink>
To
<IonRouterLink routerDirection="forward" routerLink={`/item/${item.id}`}>...
fixed my issue.
I would like to have a unique ion-title for each page of my ionic app (News, Search etc) but include a settings icon in the toolbar as well that will bring up a modal with a couple different options for the user to interact with. I want to avoid rebuilding the settings icon to keep my code DRY, prevent the unnecessary imports, and preserve separation of concerns.
news.page.html
<ion-header>
<ion-toolbar>
<ion-title>
News
</ion-title>
</ion-toolbar>
</ion-header>
app.component.html
<ion-app>
<ion-header>
<ion-icon (click)='openSettings()' slot='end' name='settings'></ion-icon>
</ion-header>
<ion-router-outlet></ion-router-outlet>
</ion-app>
As expected the page header overwrites the entire app header. I am thinking about building a separate settings icon component, but (I believe) that will require me to import it into every page.
Any help is appreciated.
I'm trying to give my app a full-sized background. But I don't really know where to put it because wherever I put the image the navbar hasn't the background.
So I tried to surround my ion-content and my ion-footer with a <div> and hoped to give it the background-class. but in this case nothing I can't see anything on the screen. Right now my background is only inside the ion-content and the footer is still empty. How can I change it?
My code:
<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
<ion-toolbar>
</ion-toolbar>
</ion-footer>
Just like you can see in the docs, you need to add the fullscreen property to the ion-content:
<ion-content fullscreen="true">
<!-- ... -->
</ion-content>
If true, the content will scroll behind the headers and footers. This
effect can easily be seen by setting the toolbar to transparent.
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.