So I've got an ionic page with a translucent ion-header and fullscreen ion-content.
The problem is that changes on the CSS are not applied when overriding the ion-content as mentioned on the official site and default styles are being applied on the ion-content after rendering
page.html
<ion-content [fullscreen]="true">
<ion-grid fixed id="mainGrid">
<ion-row>
<ion-col size="12">
<h1>Hola</h1>
<h3>Eu ex ipsum anim voluptate dolor.</h3>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
page.scss
ion-content {
--offset-top: 0;
}
And here are the tags once rendered the app:
<ion-header _ngcontent-uhx-c139="" class="ion-no-border primary md header-md header-translucent header-collapse-none header-translucent-md hydrated" ng-reflect-translucent="true" role="banner">...</ion-header>
<ion-content _ngcontent-uhx-c135="" style="--offset-top:56px; --offset-bottom:56px;" ng-reflect-fullscreen="true" class="md hydrated">...</ion-content>
Related
The header is not displaying correctly in my Ionic App, I think this happened after upgrading to Ionic 5, but I am not very sure if this happened due to the upgrade or some configuration change. I checked globals.css if there is anything related to Ionic Header, but it looks like this CSS was imported from an external site. Kindly help me resolve this issue
I tried the fix recommended in stackblitz but did not work for me
Below is the code
<ion-header>
<ion-toolbar mode="ios" class="tbar">
<ion-button color="primary" slot="start" menuToggle>
<ion-menu-button width="24">
<img alt="menu" height="24" src="assets/icon/hamburger.png" />
</ion-menu-button>
</ion-button>
<ion-button *ngIf="dho.sho" color="primary" slot="end">
<ion-menu-button width="24">
<img alt="menu" height="24" src="assets/imgs/Mo.png" tappable (click)="rightmenu()"/>
</ion-menu-button>
</ion-button>
<img alt="logo" class="head-img" height="24" src="assets/imgs/logo.png" />
</ion-toolbar>
</ion-header>
.tbar {
--background: var(--ion-color-nocol);
}
.head-img {
display: flex;
margin: 0 auto;
}
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
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;
}
I am using Ionic 2 for building an app, I have created a login page which looks like this
Now When I try to type something in username fieild the keyboard pops out and the whole page scrolls upside like this
Now I am not able to see the text fields.
I have seen some solutions on google to stop scroll when keyboard come out.Even I have tried the same but then it behaves weird in landscape mode.
my login page code is.
<ion-content class="background">
<ion-card>
<ion-card-header>
<ion-icon name="ios-log-in"></ion-icon>
Login
</ion-card-header>
<ion-card-content>
<ion-list noline >
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input class="inpt" type="text"></ion-input>
</ion-item>
<ion-item >
<ion-label floating>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
</ion-list>
<div padding>
<button ion-button block outline color="light">
<ion-icon name="ios-log-in"></ion-icon>
Sign In
</button><br />
<!-- <button ion-button block color="fb">
<ion-icon name="logo-facebook"></ion-icon>
Login with Facebook
</button> -->
</div>
<a href="">
Forgot Login Details?
<b>Get Help Signing IN</b>
</a>
</ion-card-content>
</ion-card>
<button ion-button block color="primary">Don't have an Account? Sign Up</button>
</ion-content>
This is my sass code:
page-login {
.background{
background-image:url('../assets/bg.jpg');
background-repeat: none;
}
.scroll-content{
align-content:center;
display:flex;
flex-direction:column;
}
ion-card.card{
box-shadow:none;
background:rgba(0,0,0,0.6);
border-radius:8px;
}
a, p, ion-card-header.card-header {
color:#fff;
}
.list > item-block:first-child{
border:medium none
}
.item{
margin-bottom:10px;
background:rgba(255,255,255,0.7);
border:medium none;
.text-input,{
color:green;
}
*:-moz-placeholder{
color:black !important;
}
*:-moz-input-placeholder{
color:black !important;
}
}
}
I have gone through some links which says that this is a bug in ionic beta version.
this link
Is there any standard solution on this issue ? because this functionality is common thing in all apps .
Bit confused to take a call to go with ionic or not .
In my <ion-content> element the ionic automatically creates a scroll-content child. How to disable this?
Maybe a pretty ugly workarund would be to add a style rule like
scroll-content {
padding-top: 0px !important;
}
I've checked the documentation, but I can not find how to prevent that <scroll-content> element from being created.
I do had the same problem. Try the following code.
.helllot >.scroll-content {
padding: 0px !important;
}
html
<ion-scroll scrollX="true" style="height:54px;" class="helllot">
<ion-row>
<ion-col width-25>
hello1
</ion-col>
<ion-col width-25>
hello1
</ion-col>
</ion-row>
</ion-scroll>