I want to place my footer directly above keypad at the bottom.
HTML:
<ion-footer >
<ion-toolbar>
<ion-buttons>
<button ion-button (click) = getBlurred() >
button1
</button>
<button ion-button >
button2
</button>
<button ion-button >
button3
</button>
</ion-buttons>
{{focusedElement ? focusedElement.value : "null"}}
</ion-toolbar>
</ion-footer>
SCSS:
ion-footer {
position:fixed;
bottom : 0;
}
The fixed property allowed me to place the footer at the bottom.
However, each time i activate the input field, the position changes differently. How can i solve this problem?
Related
I am working in Ionic app and I have used the ion-item in my app and I want select one item before moving to the next page but I am not able to select the item.
This is my shipping.html:
<ion-list *ngFor="let itm of shippingdetails">
<ion-item-divider>
<ion-checkbox slot="end"></ion-checkbox>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
<button ion-button outline item-end>
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-divider>
</ion-list>
In this, I am showing the items in the loop. It is showing the data but the problem is that I am not able to select the item. I have also used the checkbox but when using the checkbox, it is not showing the p and h2 tags in the view.
This is result in the html, when using the checkbox it is not showing the p and h2 tag. When I am not using the checkbox, it is showing the p and h2 tag.
Any help is much appreciated.
Just Try This: It Works!
<ion-list *ngFor="let itm of shippingdetails">
<ion-item-divider>
<ion-checkbox slot="end" [disabled]="isCheckboxDisabled" (ionChange)="selectCP(itm)"></ion-checkbox>
<!-- <ion-radio slot="start"></ion-radio> -->
<!-- <ion-toggle slot="start"></ion-toggle> -->
<ion-label>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
<p>{{itm.state}}, {{itm.city}}</p>
<p>{{itm.address}}</p>
<p>Pincode: {{itm.pincode}}</p>
</ion-label>
<button ion-button outline item-end>
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-divider>
</ion-list>
In this, It will show the checkbox for all the items and the text also.
I am working in the Ionic App and In that I have some list items with the radio button and at the bottom of the page, I have the checkout button. I want to disable the button until the user checked one of the item.
This is my shipping.html:
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col col-12>
<ion-list radio-group>
<ion-item *ngFor="let itm of shippingdetails">
<ion-radio item-start value="{{itm.id}}"></ion-radio>
<ion-label>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
<p>{{itm.state}}, {{itm.city}}</p>
<p>{{itm.address}}</p>
<p>Pincode: {{itm.pincode}}</p>
</ion-label>
<button ion-button outline item-end class="myedit22" (click)="editshipping(itm)">
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end class="dele22" (click)="removeshipping(itm.id)">
<ion-icon name="ios-trash-outline"></ion-icon>
</button>
</ion-item>
</ion-list>
</ion-col>
<ion-col col-12 style="text-align: right;">
<button (click)="presentProfileModal()" class="myaddto22" ion-button square item-right>
Add Address
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer class="single-footer" style="bottom: 51px; background-color: #fff;">
<ion-grid>
<ion-row>
<ion-col class="addCart">
<button class="myaddto22" [disabled]="!value" full ion-button round="true">
Make Payment
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
In this html, I am showing the items with the radio button and the checkout button at the bottom of the page but the problem is that, I am not able to disable the bottom button until the user checks the radio button.
In this, I am showing the items with the radio button and I have the button at the bottom. It will disable until the user select the item but the problem is that when the user select the item after that the button is not clickable.
Any help is much appreciated.
Seems like you need to store the selected radio button in a model, and then set your disabled flag based on that.
<ion-list radio-group [(ngModel)]="yourSelectedRadioValue">
...
<button class="myaddto22" [disabled]="!yourSelectedRadioValue" full ion-button round="true">
Make Payment
</button>
I would like to have a different side menu when selecting tabs from below. I mean I want my side menus to change when I select a tab.
Can I do this?
Thanks
Phil
One way is to apply (on each item in your menu) a conditional class:
.hidden {
display: none;
}
as an example app.html:
<ion-menu [content]="content">
<!-- The side menu title -->
<ion-header>
<ion-navbar>
<ion-title>{{loc.translate.MENU}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<!-- Show toggle only when first tab -->
<ion-item [class.hidden]="currentTab == firstTab" >
<ion-toggle (ionChange)="toggled()" ></ion-toggle>
<ion-label>Switch Wifi</ion-label>
</ion-item>
<!-- Show only when first tab -->
<button [class.hidden]="currentTab == firstTab" ion-item menuToggle>
<ion-icon item-start name="close"></ion-icon>tab 1 says hello
</button>
<!-- Show only when second tab -->
<button [class.hidden]="currentTab == secondTab" ion-item menuToggle>
<ion-icon item-start name="close"></ion-icon>tab 2 says hello
</button>
<!-- Show only when third tab -->
<button [class.hidden]="currentTab == thirdTab" ion-item menuToggle>
<ion-icon item-start name="close"></ion-icon>tab 3 item here
</button>
<!-- Show always -->
<button ion-item menuToggle>
<ion-icon item-start name="close"></ion-icon>CLose Menu
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>
and on your app.component.ts youll make your way to getting the current Page (or tab) and have your properties firstTab, secondTab and such be defined as the pages so that you can have it compared with the current page.
I want to set menuToggle button in the left side of input text I used this code:
<div id="searchDiv">
<ion-item>
<button item-start ion-button icon-only color="dark" menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<input type="text" placeholder="I'm Searching For .." [(ngModel)]="searchInput" />
</ion-item>
</div>
and I get this output:
If I remove menuToggle from tag button to be:
<button item-start ion-button icon-only color="dark" menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
It align to left correctly, I don't know what is the problem with menuToggle, what should i do?
In src\app\app.html set this:
<ion-menu [content]="content" side='right'>
This will work correctly.
if you want menu toggle at right side then do it and this will be at your page
<div class="bar bar-header"> <h1 class="title">Header Buttons</h1> <button item-start ion-button icon-only color="dark" menuToggle> <ion-icon name="menu"></ion-icon> </button> </div>
use this code for buttons
I want to implement three ion-button's in ion-footer, each algining to left, middle and right respectively.
It seems ion-button's with start and end can do left and right.
How about middle? I have checked the API and ion component, it seems ion-title is by default centered, but there is no out-of-box way to get button in the middle?
In the ion-footer element, try using ion-grid and then remove the padding from the grid.
<ion-footer>
<ion-grid>
<ion-row no-padding no-margin>
<ion-col col-4 no-padding>
<button ion-button full>Button 1</button>
</ion-col>
<ion-col col-4 no-padding>
<button ion-button full>Button 2</button>
</ion-col>
<ion-col col-4 no-padding>
<button ion-button full>Button 3</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
You can add the float-start and float-end to the first and third button respectively. By making use of float-[start|end] instead of float-[left|right] your buttons will shift position with the app direction
HTML:
<ion-footer>
<div class="btn-wrapper">
<button ion-button float-start>Button1</button>
<button ion-button>Button2</button>
<button ion-button float-end>Button3</button>
</div>
</ion-footer>
CSS:
.btn-wrapper {
text-align: center;
}
EDIT:
Added a wrapping <div> for the buttons and gave it the style text-align: center;, becasue I was experiencing weird animation behavior without the wrapping <div>.