I just want to flip the word inside side menu to right, my sidemenu is to the right but the word still using LTR even i apply on the rtl on the theme folder
in the variables.scss
$app-direction: rtl;
on cal.html
<ion-header>
<ion-navbar color = "newcolor">
<button ion-button menuToggle right>
<ion-icon name="menu" style="text-align:right"></ion-icon>
</button>
<ion-title style="text-align:right">ألـة الحاسبـة</ion-title>
</ion-navbar>
</ion-header>
You have to also write #include rtl() in selector for flip right to left and for left to right #include ltr() function used .Below i have give example adding page-title class to #include rtl() function to flip right to left
cal.html
<ion-header>
<ion-navbar color = "newcolor">
<button ion-button menuToggle right>
<ion-icon name="menu" class="page-icon"></ion-icon>
</button>
<ion-title class="page-title">ألـة الحاسبـة</ion-title>
</ion-navbar>
</ion-header>
variables.scss
$app-direction: rtl;
.page-title {
#include rtl {
// Custom rtl style goes here
text-align:right
}
}
Fixed title direction
<ion-title dir="rtl">ألـة الحاسبـة</ion-title>
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
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 new in ionic and wants to learn it. my question is How to change nav bar color for all the pages in ionic 3.
I have been using following code
<ion-header>
<ion-navbar color="primary">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Hello Ionic</ion-title>
</ion-navbar>
</ion-header>
Is there any way to change nav bar color for all the pages instead of manually doing <ion-navbar color="primary">
Add following line to variables.scss file to change the color globally.
$toolbar-background: #3D9BDD;
This can achieve different way i will show you 2 way
First way
In variables.scss file $colors portion add customColor
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
customColor:(
base: #00953B,
contrast: #ffffff
)
);
Here base is background color and contrast is text-color
And change in .html file
<ion-header>
<ion-navbar color="customColor">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Hello Ionic</ion-title>
</ion-navbar>
</ion-header>
Second way
override default color toolbar color
$toolbar-background: #00953B;
If anyone is looking for a solution using dynamic themes, it is possible to change the text color using css like this in Ionic 3:
.header .toolbar-title {
color: #fff !important;
}
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.
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 .