ion-footer button doesn't disappear properly when navigating from page1 to page2 and then navigate back from page2 to page1.
Here's the code in page2:
<ion-footer padding>
<button ion-button block round color="primary">Add to Order</button>
</ion-footer>
I have found an exact same issue on github which recommend adding tag ion-toolbar
but it didn't work for me:
ion-footer on back should disappear on willLeave not didLeave
Footer Visible During Navigation Transition
Nav animations for ion-footer-bar and ion-header-bar
Any comments/answers are appreciated!
Create a new class, say, .app-footer, with the same CSS properties as ion-footer and place the HTML within ion-content, like so:
HTML
<ion-content>
<page code>
<div class="app-footer">...</div>
</ion-content>
SCSS
.app-footer {
left: 0;
bottom: 0;
position: absolute;
z-index: 10;
display: block;
width: 100%;
}
Finally, I make it work, wrap button in div tag with padding solved my issue:
<ion-footer>
<div padding>
<button
ion-button block round color="primary"
[disabled]="items.length === 0" (click)="onContinueClick()">
Continue
</button>
</div>
</ion-footer>
On ionic version 6 i had the same problem, and for those who are facing the same, the solution that worked for me was enclosing the content of ion-footer into an ion-content
Code example:
<ion-footer>
<ion-content>
Your footer content
</ion-content>
</ion-footer>
In my case i had also to set a height to ion-footer for example:
ion-footer{
height: 6rem;
}
Related
The test modal has the footer. I want this footer to stick to the bottom of the screen even though it's in the modal it's self. Its conditional too, when a user clicks on an item the button within the footer appears, but it is only visible when the modal is pulled all the way up, it should stick to the bottom of the screen (see images)
footer at bottom of modal and sticky, but not sticky to the screen itself
Ideally where the footer should display once an item is selected, but only displays once ion-modal is at breakpoint = 1
<ion-modal class="sheet-modal"
[isOpen]="true"
[breakpoints]="[0.2, 0.4, 1]"
[initialBreakpoint]="0.3"
[backdropBreakpoint]="0.6"
[backdropDismiss]="false"
>
<ng-template >
<ion-header>
<ion-toolbar>
<ion-title>{{value}}</ion-title>
<ion-buttons slot="end">
<ion-button *ngIf="false" (click)="collapseSheetModal()">
<ion-icon color="secondary" name="caret-down"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let facility of facilitys; let i = index">
<ion-label>{{facility.name}}</ion-label>
<ion-checkbox (ionChange)="zoomToFacility($event.detail,facility)" [(ngModel)]="facility.isChecked" [value]="facility" [name]="facility.name" color="secondary" ></ion-checkbox>
</ion-item>
</ion-list>
</ion-content>
<ion-footer class="footer">
<ion-toolbar *ngIf="selected">
<ion-button >
View units in {{selected.name}}
</ion-button>
</ion-toolbar>
</ion-footer>
</ng-template>
</ion-modal>
Ideally it should look like this:
the footer sticks to the bottom of the screen regardless of the modal break points
Same can be said here
I had created the ionic popup. Created a popover page and added action on button click to display popover from home page. but iam unable to change the width of the popover. below is the code;
home.page.html:
<ion-content>
<ion-button expand="full" (click)="openPopover($Event)">Open popover</ion-button>
</ion-content>
home.page.ts:
async openPopover(ev: Event) {
const popover = await this.popoverController.create({
component:PopoverPage,
componentProps: {
custom_id: this.value
},
});
popover.present();
}
popover.page.html:
<ion-content>
<ion-list>
<ion-item>
this is popover
</ion-item>
<ion-item button color="danger" (click) = "closePopover()">
<ion-icon name="close" slot="start"></ion-icon>
Close Popover
</ion-item>
</ion-list>
</ion-content>
popover.page.ts:
closePopover() {
this.popoverController.dismiss();
}
please assist me how can i change the width of the popover as i tried adding custom css to the ion-content of the popover page but its not working.
The other method did not work for me, these changes need to be made:
First the .contact-popover .popover-content{ width: 320px; } content needs to be in global.scss
" This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the src/global.scss file or you can register a new global style file by adding to the styles build option in angular.json." (says in documentation)
Second the CSS cannot be width, it needs to be --width. The custom css properties for this are at the bottom of this: https://ionicframework.com/docs/api/popover
two ways:
override the SCSS variables;
$popover-md-width: 320px; $popover-ios-width: 320px; $popover-wp-width: 320px;
or 2. give your popover a class:
let popover = this.popover.create(ContactPopover, {}, {cssClass: 'contact-popover'})
and then style the .popover-content:
.contact-popover .popover-content{ width: 320px; }
Ionic automatically calculates the correct position for your custom width popover.
Ionic ^4 Popover width can be modified on a global level adding the following to the styles.scss file:
ion-popover {
--width: 320px;
}
For ionic 6.x the solution is
ion-popover {
&::part(content) {
min-width: 230px;
}
}
I have a custom < ion-header > background design with a CSS clip path that creates a slanted look. I want to be able to change the navbar to a standard ionic nav bar design as the use scrolls down the page.
What I want to achieve is as the user scrolls down I want it to change to a standard nav bar and as user scrolls to top of the page to go back to my custom background
<ion-header no-border class="discoverHeaderx" >
<ion-navbar class="feedNavbarDiscover" no-fixed no-border>
<button ion-button menuToggle>
<ion-icon name="menu" color="purple"></ion-icon>
</button>
<ion-title ></ion-title>
</ion-navbar>
</ion-header>
SCSS
.discoverHeaderx{
background-size: cover;
border:none;
background: url('../assets/img/discover_bg.svg');
background-color:#ffe680;
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
}
You can do this with Content from ionic-angular. So in your .TS file you'll need this:
import { ViewChild } from '#angular/core';
import { Content } from 'ionic-angular';
export class YourPage {
#ViewChild(Content) content: Content; // getting a reference to the content
public offsetFromTop: number = 0;
// EVERYTIME YOU SCROLL YOUR PAGE IT'LL GET THE NUMBER OF PX IT HAS SCROLLED AWAY FROM THE TOP
checkIfTop() {
this.offsetFromTop = this.content.scrollTop;
}
}
And in your HTML you'll conditionally use the class that'll customize your header
<ion-header no-border [ngClass]="{'discoverHeaderx': offsetFromTop == 0}">
<!-- THIS'LL ADD YOUR CLASS IF THE USER IS ON TOP OF THE PAGE, IF YOU
WANT TO SHOW THE CUSTOMIZED HEADER EARLIER YOU CAN USE offsetFromTop < x AND X BEEING A NUMBER YOU WANT. -->
<ion-navbar class="feedNavbarDiscover" no-fixed no-border>
<button ion-button menuToggle>
<ion-icon name="menu" color="purple"></ion-icon>
</button>
<ion-title ></ion-title>
</ion-navbar>
</ion-header>
For this to work you'll need to add an scroll event to your ion-content to execute your function everytime you scroll
<ion-scroll (ionScroll)="checkIfTop()">
...
</ion-scroll>
Your question about the non fixed header is the same as the first one about "switching" the headers. But fyi the header is always fixed on tp of page, it'll not be if you use it inside <ion-content>, but in your case since you just want to switch the header style the code will work.
Hope this helps.
On the top of the page, I’ve got a div for which background image has been set. I want to place the fab button on the bottom right edge of this div. Exactly like the following image. How can I do this?
Just use the edge attribute that comes along with fabs:
<ion-fab bottom right edge>
<button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>
For this to work the div (or any tag) having the fab inside must have position set to relative, absolute or fixed to work, position: inherit may work too depending on parent positioning.
Hope this helps.
Thanks to #Garrett and #Gabriel, I got it working using the following markup and scss. It's important to place the FAB button inside the div to which we want to assign the background image so that we can use relative positioning:
<ion-content>
<div id="header">
<ion-fab bottom right edge>
<button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>
</div>
</ion-content>
And the scss file:
#header {
background-image: url('../assets/images/anonymous.jpg')!important;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 25vh;
}
ion-fab {
position: relative;
}
ion-fab[bottom][edge] {
bottom: -21vh;
}
.fab {
margin-right: 3vw;
}
Here is what I could get to work.
This works by creating a fab-container that is going to overlay the main container on this page. For this to work you need to know their heights. Then we make the fab-container z-index of 1 to be on top. Then we can use flex to make the fab be in the bottom right. Then we can add a margin-top half the size of the fab to the fab-container to have the fab hover halfway in-between. Lastly we can add margin-right to get the fab off the right side.
This may not be the best way to do it, since it requires knowing the height of your container, but it was the way that I would approach this task.
<ion-content>
<div class="container"></div>
<div class="fab-conatainer">
<ion-fab class="fab">
<button ion-fab>
<ion-icon name="camera"></ion-icon>
</button>
</ion-fab>
</div>
<div class="contacts-container">
<ion-list>
<ion-item>
<ion-input placeholder="Name"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Phone"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Email"></ion-input>
</ion-item>
</ion-list>
</div>
</ion-content>
CSS
.container {
width: 100%;
background: #333;
height: 500px;
}
.fab-conatainer {
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 500px;
z-index: 1;
margin-top: 28px;
}
.fab {
margin-right: 14px;
}
I'm trying to align text in Html but it doesn't work and I do not know why. I'm using Ionic Framework.
My code is:
<ion-list>
<ion-item>
<b>Name</b> <p align="right"> {{paciente.name}}</p>
</ion-item>
....
</ion-list>
and it looks like this:
but I want all text int the same line, and I do not know how to get that.
See this demo: http://play.ionic.io/app/b477ea2f5623
In ionic items, if you write any text within span with item-note class then it will be aligned to right.This is built in class by ionic, your code will be like this :
<ion-item>
<b>Name</b> <span class="item-note"> {{paciente.name}}</span>
</ion-item>
See more tricks with ionic items provide by built in classes, see this Documentation
Add a css class as
.item {
position: absolute;
right: 0px;
width: 300px;
padding: 10px;
}
The p tag creates a paragraph on a new line, so you need an other element. You could use a span element which is floated right:
Html:
<ion-list>
<ion-item>
<b>Name</b> <span class="right"> {{paciente.name}}</span>
</ion-item>
....
</ion-list>
Css:
.right {
float: right;
}
Apply the ckass to all items you want to be on the right.