I am using ionic angular,ion-button is not working in some parts of code,but it is working in some parts of code.The button is not getting clicked.
<div class="ion-page" id="main">
<ion-header>
<ion-toolbar>
<ion-button slot="start" expand="block" >
<ion-menu-button ></ion-menu-button>
<!-- <ion-menu-button (onclick)="gotoLogin()"></ion-menu-button> -->
</ion-button>
<ion-title>Capture Image</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-button (click)="goToProfile()">Profile Page</ion-button>
</ion-list>
</ion-content>
</div>
<ion-menu side="start" menuId="first" contentId="main">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-button (click)="goToProfile()">Profile Page</ion-button>
<ion-button>Capture Image</ion-button>
<ion-item>Community</ion-item>
</ion-list>
</ion-content>
</ion-menu>
The button in div is not working where as button in ion-menu is working.
What is the problem with this?
You can try like this, according to https://ionicframework.com/docs/api/item
<ion-list>
<!-- Item as a Button -->
<ion-item button (click)="buttonClick()">
<ion-label>
Button Item
</ion-label>
</ion-item>
</ion-list>
Related
I have two ion menus and one main content(router outlet). And when i resize the page or place it on moblie view, i get a blank page, like the content is missing.
code:
<ion-app>
<ion-split-pane>
<ion-menu side="start" menuId="first" contentId="main">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-menu side="end" menuId="first" contentId="main">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet></ion-router-outlet>
</ion-split-pane>
</ion-app>
What can i add or do to make the content not disapear?
First of all, both your menus have the same menuId="first". make one of them menuId="second". I think you missed id="main" for ion-router-outlet too. fix these things and try again.
Here's what works for me in Angular 13 and Ionic 6
<ion-app>
<ion-split-pane contentId="main-content">
<ion-menu side="start" menuId="start" contentId="main-content" type="overlay">
<ion-content>
<ion-grid class="ion-no-padding">
<ion-row class="ion-no-padding">
<ion-col size="12" class="ion-no-padding">
<ion-item class="transparent header" lines="none">
<ion-label class="ion-text-start">
<h2 class="text-size-lg font-bold text-color-primary ion-text-wrap padding-half-bottom">
Left Menu Title
</h2>
<h3 clas="text-size-xs font-regular text-color-primary ion-text-wrap">
Left Menu Subtitle
</h3>
</ion-label>
</ion-item>
<ion-list class="ion-no-padding">
<ion-menu-toggle translate auto-hide="false" *ngFor="let pageModel of startMenuPageModels">
<ion-item lines="none" class="border-radius box-shadow ion-margin" [routerDirection]="'root'" (click)="openPage(pageModel)">
<i slot="start" class="{{pageModel.icon}} icon-font-md icon-color-primary"></i>
<ion-label class="text-size-xs font-bold text-color-primary">
{{pageModel.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
</ion-menu>
<ion-menu side="end" menuId="end" contentId="main-content" type="overlay">
<ion-content>
<ion-grid class="ion-no-padding">
<ion-row class="ion-no-padding">
<ion-col size="12" class="ion-no-padding">
<ion-item class="transparent header" lines="none">
<ion-label class="ion-text-start">
<h2 class="text-size-lg font-bold text-color-primary ion-text-wrap padding-half-bottom">
Right Menu Title
</h2>
<h3 clas="text-size-xs font-regular text-color-primary ion-text-wrap">
Right Menu Subtitle
</h3>
</ion-label>
</ion-item>
<ion-list class="ion-no-padding">
<ion-menu-toggle translate auto-hide="false" *ngFor="let pageModel of startMenuPageModels">
<ion-item lines="none" class="border-radius box-shadow ion-margin" [routerDirection]="'root'" (click)="openPage(pageModel)">
<i slot="start" class="{{pageModel.icon}} icon-font-md icon-color-primary"></i>
<ion-label class="text-size-xs font-bold text-color-primary">
{{pageModel.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>
</ion-app>
I need to remove hamburger default icon menu on ionic menu. I've added custom menu and I need to remove default icon.
So my code:
<ion-menu side="start">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-icon name="home" slot="start"></ion-icon>
<ion-label>Home</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person" slot="start"></ion-icon>
<ion-label>Profile</ion-label>
</ion-item>
<ion-item>
<ion-icon name="chatbubbles" slot="start"></ion-icon>
<ion-label>Messages</ion-label>
</ion-item>
<ion-item>
<ion-icon name="settings" slot="start"></ion-icon>
<ion-label>Settings</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
My layout menu:
Html button code:
<ion-header _ngcontent-yjt-c1="" role="banner" class="ios header-ios hydrated">
<ion-toolbar _ngcontent-yjt-c1="" class="ios hydrated">
<ion-buttons _ngcontent-yjt-c1="" slot="start" class="buttons-first-slot sc-ion-buttons-ios-h sc-ion-buttons-ios-s ios hydrated">
<ion-menu-button _ngcontent-yjt-c1="" class="hydrated ios button ion-activatable ion-focusable"></ion-menu-button>
</ion-buttons>
<ion-title _ngcontent-yjt-c1="" class="ios title-ios hydrated"></ion-title>
</ion-toolbar>
</ion-header>
I need to remove default icon inside circle. How to do to remove?
Can you please try the following css rules?
Can you please check if they don't work if they get added to the css of the page you are viewing?
ion-menu-button {
display: none !important;
}
or
ion-buttons {
display: none !important;
}
or
.button.ion-activatable.ion-focusable {
display: none !important;
}
Add the below styles in your app.scss file to hide the default menu button
.bar-button-menutoggle {
display: none !important;
}
I'm trying to implement the ion-item-sliding option to create an ion-card that can slide within a flex-box grid. Unfortunately, it doesn't seem to work very well.
To be specific, nothing actually happens! No matter what direction I swipe from, there is no indication of a swipe taking place.
Here is what I have so far:
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col col-6 offset-sm-3 *ngFor = "let list of listRef | async">
<ion-item-sliding>
<ion-item>
<ion-card>
<img *ngIf="list.color=='#f55f7c'" src="data:image/png;base64,iVBORw0dsfladj=">
<img *ngIf="list.color=='#ffcb53'" src="data:image/png;base64,iVB5CYII=">
<img *ngIf="list.color=='#85dec8'" src="data:image/png;base64,iVBORw0KGgoAAAANSU=">
</ion-card>
</ion-item>
</ion-item-sliding>
<ion-item-options side="left">
<button ion-button>Favorite</button>
<button ion-button color="danger">Share</button>
</ion-item-options>
</ion-col>
<button id="add-bttn" ion-button [navPush]="goNew"><ion-icon name="add"></ion-icon></button>
</ion-row>
</ion-grid>
</ion-content>
I've tried it with the *ngFor statement placed within the tag and in the tag. No go.
Any help would be enlightening!
Just like you can see in the Docs, the ion-item-options should be within the ion-item-sliding element. Besides, the items should be placed inside of an ion-list container.
So something like this should work:
<ion-content padding>
<ion-list> <!-- Here I've added the ion-list -->
<ion-row>
<ion-col col-6 offset-sm-3 *ngFor = "let list of listRef | async">
<ion-item-sliding>
<!-- Item -->
<ion-item>
<ion-card>
<img src="https://randomuser.me/api/portraits/men/51.jpg">
</ion-card>
</ion-item>
<!-- Options -->
<ion-item-options side="left">
<button ion-button>Favorite</button>
<button ion-button color="danger">Share</button>
</ion-item-options>
</ion-item-sliding> <!-- This includes the options-->
</ion-col>
<button id="add-bttn" ion-button [navPush]="goNew">
<ion-icon name="add"></ion-icon>
</button>
</ion-row>
</ion-list>
</ion-content>
Stackblitz project
I hope you can help me with this problem. Since yesterday I’ve been trying to position this green button on the right side. And things like margin don’t work:(
HTML
<ion-header>
<ion-toolbar color="rank">
<ion-searchbar (input)="getItems($event)"></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list-header>
Friends
</ion-list-header>
<ion-list>
<ion-item>
<ion-avatar item-start>
<img src="img/fri.jpg">
</ion-avatar>
<h1>JanePrincess</h1>
<h3>Iceland, Reykjavik </h3>
<button ion-button color="rank" round>Add</button>
</ion-item>
</ion-list>
</ion-content>
Here the button
Just like you can see in the docs, you can achieve that by using the item-end attribute in the button:
<ion-list>
<ion-item>
<ion-avatar item-start>
<img src="img/fri.jpg">
</ion-avatar>
<h1>JanePrincess</h1>
<h3>Iceland, Reykjavik </h3>
<button ion-button color="rank" round item-end>Add</button>
</ion-item>
<!-- ... -->
</ion-list>
Use ion-item padding.
<ion-item padding>
<button default ion-button item-right color="rank" round >Add</button>
</ion-item>
You can use css as well.
I hope you made the CSS file for the above problem, so try putting the following code into it:
button {
color:green;
position:relative;
top:-43px;
left: 410px;
}
To adjust the position of the button horizontally, just adjust left position accordingly.
I referred to my button to align left and right start and end key as per the above link. But i am not able to set my button as per the view in the link here is my output image
Here is my code
<ion-header class="home">
<ion-navbar primary padding>
<ion-row>
<ion-buttons start>
<button menuToggle >
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>Auto Parts</ion-title>
<ion-buttons end>
<button> <ion-icon name="document"></ion-icon></button>
<button><ion-icon name="heart"></ion-icon></button>
<button><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-row>
<ion-row>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-row>
</ion-navbar>
</ion-header>
What I have tried so far is:
float: right; and float: left;
algin: right
but not able to get my button to left
You can achieve that layout by using an <ion-toolbar> to place the search bar like you can see in this plunker
<ion-header class="home">
<ion-navbar primary padding>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Auto Parts</ion-title>
<ion-buttons end>
<button> <ion-icon name="document"></ion-icon></button>
<button><ion-icon name="heart"></ion-icon></button>
<button><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-navbar>
<ion-toolbar primary>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-toolbar>
</ion-header>
EDIT:
To hide both borders, the no-border attribute should be used on the
ion-toolbar. To hide the top or bottom border, the no-border-top and
no-border-bottom attribute should be used.