im having troubles trying to customize the sidemenu which ionic generates automatically.
The sidemenu is located at "app.component.html" and it looks like it follows:
<ion-app>
<ion-menu contentId="content1" side="start" >
<ion-header >
<ion-toolbar >
<ion-avatar>
<img [src]="image">
</ion-avatar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content >
<ion-list >
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" >
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" (click)="dembow(p)" >
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content1" main ></ion-router-outlet>
</ion-app>
i've tried to use the attribute "style:background-color:#000000" etc to change the style and it works if i put it on every element , but i would like to know if there is some easier and efficient way to customize the sidemenu.
Thank you team!
The first thing you need to know is in ionic '<ion-content>', '<ion-list>' is directives. You can manipulate these directive's template design using css.
for Eg.
In HTML-
<div class="side-nav-menu"> <!--wrap side menu in div tag and give class to it-->
<ion-content >
<ion-list >
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" >
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" (click)="dembow(p)" >
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</div>
In Your Application's Global css file which is app.scss
.side-nav-menu{
//add style if you want any...for eg border, shadow.etc
}
.side-nav-menu .ion-item{
//style for ion-item
}
NOTE:- Remember the directives(attributes) name is also the class name of the same directive. for eg. if the directive name is ion-item and you want to add custom css to this directive than you have to add css using .ion-item class in global scss file
<ion-content class="abc">
</ion-content>
use content class to change background this way
.abc {
--background: var(--ion-background-color,linear-gradient(to left,#E67D22, #1C4577)) !important;
}
or use only color instead of gradient
.abc {
--background: var(--ion-background-color,red) !important;
}
Related
I want to change ion-menu background different for every page but it's not working:
app.component.html:
<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content" type="overlay">
<ion-content class="app-content" part="placeholder">
<ion-list id="inbox-list">
<ion-list-header lines="full">
<ion-avatar >
<ion-img [src]="'./assets/logo.png'"></ion-img>
</ion-avatar>
Pyramid to True Love
</ion-list-header>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
<ion-item (click)="selectedIndex = i" routerDirection="forword" [routerLink]="[p.url]" lines="none" detail="false" >
<ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-app>
app.component.scss(Working):
ion-menu ion-content{
--background: #59d36d;
}
any.page.scss(Not working):
ion-menu ion-content{
--background: #59d36d;
}
Is it possible or not?
You can use like this,
Ref : Sidemenu background-color in Ionic-v4
ion-menu {
--ion-background-color: var(--ion-color-primary);
--ion-text-color: var(--ion-color-primary-contrast);
}
I have this below code for ion navbar, where I am having one menu icon on the right side. And I want to change the color of that menu header.But when i am changing color of ion-navbar , it is changing for menu header also.I want separate color for both ion-navbar and ion-menu.
<ion-menu [content]="content" side="right" id="menu2">
<ion-header>
<ion-toolbar class="menu_header">
<ion-title>MyApp</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list no-lines>
<button ion-item menuClose="menu2" detail-none>
Item1
</button>
<button ion-item menuClose="menu2" detail-none>
Item2
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-header>
<ion-navbar primary>
<ion-title class="header-title" text-center>
Home
</ion-title>
<button ion-button icon-only menuToggle="right" end >
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
And for changing the color of ion-navbar I am adding the below line in variable.scss
$toolbar-background: #EF473A;
Can anyone please help me how to keep the separate color for both?
If you want to change the color only for the titles, you could use the classes
.header-title {
color: blue;
}
.menu_header {
color: #EF473A;
}
If you'd like to change the color for the whole header You can either do it on the element:
body > ion-header {
color: blue;
}
ion-menu > ion-header {
color: #EF473A;
}
or alternatively add a class to the elements you want to modify, but that potentially mean editing a third party component...
I am using ionic 3.
<ion-header>
<ion-navbar>
<ion-title>{{ title }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
<ion-footer>
<ion-title>
{{ title }}
</ion-title>
</ion-footer>
What ever I put in "ion-content" there is no scroll when content overcome height of the screen.
I tried with grid in content:
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
<ion-col col-6>
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
<ion-col col-12 class="left-col">
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
</ion-row>
</ion-grid>
Also tried with list:
<ion-list>
<ion-item>Item 1</ion-item>
<ion-item>Item 2</ion-item>
<ion-item>Item 3</ion-item>
...
</ion-list>
Nothing works. What is the catch here ?
I think this should be handled automatically by Ionic.
To enable vertical scroll to your page or any other container, there is a tag called
<ion-scroll scrollY="true">
// your content here
</ion-scroll>
To enable horizontal scroll, just change scrollY=true to scrollX=true
in your sass file add the following :
ion-scroll {
white-space: nowrap;
height: 500px;
}
The real problem is that ionic global CSS property was overridden in the project.
"scroll-content" class must not be changed in project styles.
You can use 'ion-list' property in CSS and change this:
ion-list
{
overflow-y: scroll;
};
Also, if doesn't change yet, you can put '!important' after, like this:
ion-list
{
overflow-y: scroll !important;
};
I need to position two checkboxes inline next to each other with their belonging
label on the left of each checkbox.
Here is picture for better understanding: (on picture there is an e-mail checkbox which does not exist in app so just ignore it, there should be only two checkboxes)
Everything I tried so far didn't gave me wanted output so this is a code which I have now in the app.
This is in my form element:
<ion-item>
<ion-label text-uppercase>Phone Calls</ion-label>
<ion-checkbox name="receive_calls"
[ngModel]="(contact$ | async).receive_calls">
</ion-checkbox>
</ion-item>
<ion-item>
<ion-label text-uppercase>Text Messages</ion-label>
<ion-checkbox name="receive_messages"
[ngModel]="(contact$ | async).receive_messages">
</ion-checkbox>
</ion-item>
I won't provide style code because it does not work at the moment.
You can replace the <ion-item>-elements with <div>'s, to get away from the extra styling you get from the <ion-item> elements. Also i wrapped the checkboxes in an outer <div>:
HTML:
<div>
<div float-left class="my-checkbox">
<ion-label text-uppercase>Phone Calls</ion-label>
<ion-checkbox name="receive_calls">
</ion-checkbox>
</div>
<div float-right class="my-checkbox">
<ion-label text-uppercase>Text Messages</ion-label>
<ion-checkbox name="receive_messages">
</ion-checkbox>
</div>
</div>
SCSS:
.my-checkbox {
display: flex;
align-items: center;
}
RESULT:
You can use instead of
<ion-item>
<span>SMS </span>
<ion-checkbox></ion-checkbox>
</ion-item>
I have an Ionic >=2 application where I would like to have 2 or 3 fixed rows at the top of the page, and then have the rest of the page as a scrollable list (and later I want it to be virtual, but just want to get the simple list working forst).
As a simplified example, I have the following plunk. The markup repeated here is..
<ion-header>
<ion-navbar>
<ion-title>{{ appName }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content scroll=false>
<ion-grid>
<!-- Row 1 fixed at top -->
<ion-row>
<ion-col>
<ion-searchbar></ion-searchbar>
</ion-col>
<!-- Other cols -->
</ion-row>
<!-- Row 2 Scrollable list -->
<ion-row>
<ion-col>
<ion-list>
<ion-item *ngFor="let item of data">
<div>{{item}}</div>
</ion-item>
</ion-list >
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
The problem is the search bar also scrolls with the list, whereas I would like this to always remain visible at the top of the page.
Does anyone know why I have the search bar also scrolling when this is in a completely separate row to the ion-list? Should I be using an ion-grid in this way?
Thanks in advance for any help!
ion-content does not have scroll input property to disable it.
If you need to have searchbar always visible, I suggest you place it in a toolbar.
<ion-header>
<ion-navbar>
<ion-title>{{ appName }}</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
</ion-header>
Or use ion-scroll with a fixed height.
<ion-grid>
<!-- Row 2 Scrollable list -->
<ion-row>
<ion-col>
<ion-searchbar></ion-searchbar>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-scroll style="width:100%;height:100vh" scrollY="true">
<ion-list scroll="true">
<ion-item *ngFor="let item of data">
<div>{{item}}</div>
</ion-item>
</ion-list>
</ion-scroll>
</ion-col>
</ion-row>
</ion-grid>
Sample Plunkr
Update: To answer #JohnDoe's comment.. in order to get scroll list to take the height of rest of the screen use Viewport percentage height to set the height of ion-scroll.
This is how I managed to have a list at the bottom of the page scroll without scrolling the whole page:
HTML
<ion-content>
<div class="table">
<div class="table-row">
<ion-searchbar></ion-searchbar>
</div>
<div class="table-row last-row">
<div class="table-cell cell-content-outer-wrapper">
<div class="cell-content-inner-wrapper">
<div class="cell-content">
<ion-list>
<ion-item *ngFor="let item of data">
<div>{{item}}</div>
</ion-item>
</ion-list>
</div>
</div>
</div>
</div>
</div>
</ion-content>
CSS
.table {
display: table;
width: 100%;
height: 100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
.last-row {
height: 100%;
}
.cell-content-outer-wrapper {
height: 100%;
}
.cell-content-inner-wrapper {
height: 100%;
position: relative;
overflow: auto;
}
.cell-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Makes use of lots of divs but it worked for me in ionic 2 and in onsen-ui as well when I was facing the same problem.
I'm using Ionic 5 with Vue. I wanted to have a fixed content at the top of the page with a scrollable list below. This is all I had to do:
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/"></ion-back-button>
</ion-buttons>
<ion-title>Page title</ion-title>
</ion-toolbar>
</ion-header>
<ion-card>
<ion-card-content>
<!-- Here is the fixed content -->
</ion-card-content>
</ion-card>
<ion-content>
<!-- This content will scroll -->
<ion-list>
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-page>
The trick was in putting the fixed content between <ion-header> and <ion-content> components.
I've made an npm packge that create this fixed scroll.
You need to install and use the npm package on your project (ionic3)
npm install --save ionic2-fixedscroll-directive
Import the ngFixedScrollDirective module on your page or AppModule
import { NgFixedScrollModule } from 'ionic2-fixedscroll-directive';
#NgModule({
declarations: [
MyPage
],
imports: [
IonicPageModule.forChild(MyPage),
NgFixedScrollModule
],
entryComponents: [
MyPage
]
})
export class MyPageModule {}
Create the SASS CSS to fix the element
your-page {
ion-searchbar {
&.fixed {
#extend .toolbar; //optional
position: fixed;
top: 0;
transition: all 0.5s ease;
&.searchbar-ios {
transform: translateY(calc(#{$navbar-ios-height} + #{$cordova-ios-statusbar-padding}));
}
&.searchbar-md {
transform: translateY(#{$navbar-md-height});
}
&.searchbar-wp {
transform: translateY(#{$navbar-md-height});
}
z-index: 3; //zindex to put it on top of some ionic components
}
}
}
And add the directive to the component or element that you need to fix on top of the page (outside the toolbar)
<YourComponent fixed-scroll></YourComponent>
More info on the directive git repo: https://github.com/joao-gsneto/ionic2-fixedscroll-directive