<ion-header>
<ion-navbar>
<ion-title>Physics</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding has-header contentTop="200px">
<ion-list class="chapter-list">
<button ion-item no-padding *ngFor="let chapterList of chapterLists" (click)="chapterListItemClk(event)" no-border> {{ chapterList.video_name }} <img src="{{chapterList.video_icon}}" item-left alt=""> </button>
</ion-list>
</ion-content>
This is my code in which <ion-content> is hiding behind <ion-header>.
My ionic version is 3.19.1.
How to fix this.
I have tried has-header as well.
Try adding <ion-grid></ion-grid> inside ion-content tag
<ion-header>
<ion-navbar>
<ion-title>Physics</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding has-header contentTop="200px">
<ion-grid>
<ion-list class="chapter-list">
<button ion-item no-padding *ngFor="let chapterList of chapterLists" (click)="chapterListItemClk(event)" no-border> {{ chapterList.video_name }} <img src="{{chapterList.video_icon}}" item-left alt=""> </button>
</ion-list>
</ion-grid>
</ion-content>
Related
all working fine before adding ion-tab-button, I have buttons ionic with routing to another page
when i have added ion-tabs , the router link not work in button after click
where is my error ?! i need a solution .
this is my home.page.html
<ion-header translucent>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>SERVER STORE</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
<ion-grid>
<ion-row>
<ion-col size="12">
<ion-slides pager="true" [options]="slideOptsOne" #slideWithNav
(ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
<ion-slide *ngFor="let s of sliderOne.slidesItems">
<img src="assets/{{s.id}}.png">
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<ion-row>
<ion-col>
<ion-button expand="block" [routerLink]="['/iptv-list']" >IPTV List </ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button expand="block" [routerLink]="['/sharing']" >Sharing List </ion-button>
</ion-col> </ion-row>
</ion-grid>
</ion-content>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button >
<ion-icon name="speedometer"></ion-icon>
<ion-label>مباريات اليوم</ion-label>
</ion-tab-button>
<ion-tab-button >
<ion-icon name="play-circle"></ion-icon>
<ion-label>WATCH</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
i find the solution :
adding <ion-toolbar> as parent of ion-tabs
solve my problem
with ion-split-page added, I am not able to see my side menu options which are displaying properly in mobile view.
`
<ion-app>
<ion-split-pane contentId="main">
<!-- the side menu -->
<ion-menu side="start" menuId="m1" contentId="main">
<ion-header>
<ion-toolbar>
<ion-title>Wanderlust</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle menu="m1">
<ion-item lines="none" routerLink="/places/tabs/discover">
<ion-icon name="business" slot="start"></ion-icon>
<ion-label>Discover Places</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle menu="m1">
<ion-item lines="none" routerLink="/bookings">
<ion-icon name="checkbox-outline" slot="start"></ion-icon>
<ion-label>Your Bookings</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle menu="m1">
<ion-item lines="none" (click)="onLogout()" button>
<ion-icon name="exit" slot="start"></ion-icon>
<ion-label>Logout</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<!-- the main content -->
<ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>
</ion-app>
`
Does anyone know how to solve this issue?
We need to add autoHide="false" attribute on ion-menu-toggle.
<ion-menu-toggle autoHide="false">
i am building a project with ionic 3, and the first 3 pages use the blank ionic template, because it has to do with login, registration and then verification, and afterwards you enter the applications home page, which then i utilized the sidemenu ionic template
i have succeeded in building the application and everything works, but after adding the sidemenu templates it affects the blank templates, if you slide left on the screen the side menu shows..
this is my code..
on the app.html
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div style="height:130px;"><img src="assets/imgs/titlebg.jpg"/> </div>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}} <ion-badge *ngIf="p.badge" end>234</ion-badge>
</button>
</ion-list>
</ion-content>
<ion-footer>
<p align="center" style="color:#333333"> WihofaCITY.com</p>
</ion-footer>
</ion-menu>
<ion-nav id="nav" #content [root]="rootPage"></ion-nav>
on the verify account view template i have this
<ion-header>
<ion-navbar color="">
<ion-title>Current Subscription</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<!---- content goes here ---->
<ion-grid>
<ion-row>
</ion-row>
</ion-grid>
</ion-content>
i removed the menutoggle button but if you slide on those pages, this is what i did
<ion-navbar>
<!------------i removed this section ----------------->
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<!------------i removed this section ----------------->
<ion-title>Current Subscription</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<!---- content goes here ---->
<ion-grid>
<ion-row>
</ion-row>
</ion-grid>
</ion-content>
but yet to no avail, please is there something i was supposed to do, or is not doing? thanks in advance.
You can enable/disable the sidemenu from your controller like below
<ion-menu [content]="content" id="mymenu">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div style="height:130px;"><img src="assets/imgs/titlebg.jpg"/> </div>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}} <ion-badge *ngIf="p.badge" end>234</ion-badge>
</button>
</ion-list>
</ion-content>
<ion-footer>
<p align="center" style="color:#333333"> WihofaCITY.com</p>
</ion-footer>
</ion-menu>
And then in your controller, import MenuController
import { MenuController } from 'ionic-angular';
public menuController:MenuController
menuController.enable(true,"mymenu"); //For Enabling
menuController.enable(false,"mymenu"); //For Disabling
I'm getting a problem using ion-slides on Ionic 3.
It's using all my screen size, but when i scroll down there is all my stuft and it is ok, but i need those slides be smaller
This is my code:
<ion-header>
<ion-navbar>
<ion-title>
Productos
</ion-title>
<ion-buttons end>
<button (click)="reloadProducts()" style="background:none" ion-button round full large text-center icon-right> <!--(click)="imeiViewer()"-->
<ion-icon name="cart"></ion-icon>
<ion-badge *ngIf="itemInfoHeader.length > 0" id="cart-badge">{{itemInfoHeader.length}}</ion-badge>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides pager>
<ion-slide style="width:100%; height: 50%; " *ngFor="let slide of slide_items" >
<div>
<img src="assets/img/{{slide}}.png">
</div>
</ion-slide >
</ion-slides>
<ion-grid>
<ion-row>
<ion-col col-6>
<button ion-button block icon-start>Filtrar
<ion-icon name="options"></ion-icon>
</button>
</ion-col>
<ion-col col-6>
<button ion-button block icon-end>Ordenar
<ion-icon name="reorder"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-grid>
<ion-col col-6 col-md-4 col-xl-3 *ngFor="let producto of itemInfo">
<ion-item class="item-thumbnail-left" >
<ion-grid>
<ion-row>
<ion-col col-6>
<img src="http://186.176.206.154:8088/images/Products/{{producto.ItemId}}_l_.PNG" >
</ion-col>
<ion-col col-6>
<h3>{{producto.ItemId}}</h3>
<ion-item class="item item-text-wrap">{{producto.ItemName}}</ion-item>
<p style="position:absolute;right:10px;">
<button ion-button (click)="addToCart(producto)" icon-end >
<ion-icon name="cart"></ion-icon>
</button>
</p>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-col>
</ion-content>
if anyone knows how to make my slides "circles" goes up. I tried reducing Height but it doesn't work.
I am using this as guide -> https://ionicframework.com/docs/components/#slides
Fixed! I had to add style="height: 300px;" on ion-slides.
I importet an example app (menu) and added a button with icon & text to the menu:
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item-divider></ion-item-divider>
<button ion-item icon-left (click)="logout()">
<ion-icon name="log-out"></ion-icon>
Logout
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>
Sadly, this results in a not fully shown Icon (I test my app in Chrome)
you have to use the attribute item-left at ion-icon
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item-divider></ion-item-divider>
<button ion-item icon-left (click)="logout()">
<ion-icon item-left name="log-out"></ion-icon>
Logout
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>