I added 2 ion-fab buttons in my the ion-footer of my page, but the problem here is that it looks like they are after the ion-content...
I tried to add a crazy z-index, but it's not working....
What did I wrong?
Thanks in advance!
Kind regards,
Leander
<ion-footer class="footer-section flex justify-center items-center">
<ion-toolbar>
<ion-fab left class="icon icon-search">
<button ion-fab (click)="searchProduct()">
<svg class="icon icon--search">
<use xlink:href="assets/icon/magazijnapp-icons.svg#icon-search"></use>
</svg>
</button>
</ion-fab>
<ion-fab right class="icon icon-qrcode">
<button ion-fab (click)="scanProduct()">
<svg class="icon icon--qrcode">
<use xlink:href="assets/icon/magazijnapp-icons.svg#icon-qrcode"></use>
</svg>
</button>
</ion-fab>
</ion-toolbar>
</ion-footer>
You have use ion-fab direct after ion-content and use left bottom & right bottom attributes in ion-fab
<ion-content>
...
</ion-content>
</ion-content>
<ion-fab left bottom class="icon icon-search">
<button ion-fab (click)="searchProduct()">
<svg class="icon icon--search">
<use xlink:href="assets/icon/magazijnapp-icons.svg#icon-search"></use>
</svg>
</button>
</ion-fab>
<ion-fab right bottom class="icon icon-qrcode">
<button ion-fab (click)="scanProduct()">
<svg class="icon icon--qrcode">
<use xlink:href="assets/icon/magazijnapp-icons.svg#icon-qrcode"></use>
</svg>
</button>
</ion-fab>
Related
I am trying to have a red button in an ion-item-sliding element in Ionic 4. Here is the code:
<ion-card>
<ion-item-sliding>
<ion-item>
<ion-avatar slot="start">
<img src="assets/shapes.svg">
</ion-avatar>
<ion-label>
<h3>test</h3>
<p>test</p>
</ion-label>
</ion-item>
<ion-item-options side="end">
<button ion-button color="danger">
<ion-icon name="trash"></ion-icon>
Delete
</button>
</ion-item-options>
</ion-item-sliding>
</ion-card>
However, the button shows in gray while it should be red. I also tried using ion-button instead of button. It worked, but when I coupled it with expand="full" the color of button's text turned red instead of the color of button itself.
Use the defaut button is working fine:
<ion-card>
<ion-item-sliding>
<ion-item>
<ion-avatar slot="start">
<img src="assets/shapes.svg">
</ion-avatar>
<ion-label>
<h3>test</h3>
<p>test</p>
</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option color="danger" expandable>
<ion-icon name="trash"></ion-icon>Delete
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
Hope it helps you :)
I'm trying to have a ion-list with button and checkbox or radio at the end of the line.
That's my code without checkbox/radio:
<button ion-item (click)="editItem(i, item)">
<ion-avatar item-start>
<img [src]="item.photo" />
</ion-avatar>
<h2>{{item.name}}</h2>
<p>{{item.info}}</p>
</button>
It works and I can show any information about Item object.
If I add checkbox or radio my info disappear and the button click don't work (always checkbox change event trigger).
<button ion-item (click)="editItem(i, item)">
<ion-avatar item-start>
<img [src]="item.photo" />
</ion-avatar>
<h2>{{item.name}}</h2>
<p>{{item.info}}</p>
<ion-checkbox (ionChange)="fireEvent(i, $event)"></ion-checkbox>
</button>
How can I have a button and checkbox in same row ?
You can use the grid system to put elements on the same row:
<ion-grid>
<ion-row>
<ion-col>
<button ion-item (click)="editItem(i, item)">
<ion-avatar item-start>
<img [src]="item.photo" />
</ion-avatar>
<h2>{{item.name}}</h2>
<p>{{item.info}}</p>
</button>
</ion-col>
<ion-col>
<ion-checkbox (ionChange)="fireEvent(i, $event)"></ion-checkbox>
</ion-col>
</ion-row>
</ion-grid>
more info here:
https://ionicframework.com/docs/api/components/grid/Grid/
My ionic app has a slider with 2 slides, and they show up based on left and right swipe action. I want to make my page responsive. In case of large screen i want to show both slides side-by-side and swipe action to be disabled. How can i achieve this?
I think you want to do this so far
<ion-slides autoplay="5000" loop="true" speed="3000" class="full">
<ion-slide>
<img src="assets/img/gym.jpg" />
</ion-slide>
</ion-slides>
This code auto-change your images with the slide animation and it is more responsive also
Responsive grid view is working fine for me here
<ion-content padding class="page-manhomeslider">
<ion-slides autoplay="5000" loop="false" speed="1000" (ionSlideDidChange)="slideChanged()">
<ion-slide>
<ion-grid>
<ion-row>
<ion-col text-left>
<ion-label style="color: black">1/12</ion-label>
</ion-col>
</ion-row>
<img src="assets/gif/men/1-jumping-jacks.gif" class="slide_img"/>
<ion-row>
<ion-col class="pageheader">
<h2>Jumping Jacks</h2>
</ion-col>
</ion-row>
<ion-footer>
<ion-row>
<ion-col>
</ion-col>
<ion-col>
<div id="countdown">
<div class="countdown-number"></div>
<svg>
<circle r="28" cx="40" cy="40"></circle>
</svg>
</div>
</ion-col>
<ion-col>
<ion-buttons class="btnend" end>
<button (click)="goToSlide2()" ion-button round>
<ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-buttons>
</ion-col>
</ion-row>
</ion-footer>
</ion-grid>
</ion-slide>
In React, I used states to update the slidesPerView property whenever the page is resized.
export default function ResponsiveSlides () {
const [slideOpts, setSlideOpts] = useState ({
initialSlide: 0,
speed: 400,
slidesPerView: Math.floor (window.innerWidth / 298),
spaceBetween: 1
});
function changeSlideOpts (key, value) {
setSlideOpts (
{
... slideOpts,
[key]: value
}
)
}
window.onresize = function (event) {
changeSlideOpts ("slidesPerView", Math.floor (window.innerWidth / 298));
};
return (
<IonSlides pager = {false} options = {slideOpts}>
<IonSlide>
<IonCard />
</IonSlide>
<IonSlide>
<IonCard />
</IonSlide>
<IonSlide>
<IonCard />
</IonSlide>
<IonSlide>
<IonCard />
</IonSlide>
<IonSlide>
<IonCard />
</IonSlide>
<IonSlide>
<IonCard />
</IonSlide>
</IonSlides>
)
}
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 add an element outside of modal using Ionic2 like the image below.
The area surrounded by blue border is the element that I want to add.
The area surrounded by red border is the custom modal that I have created.
Custom Modal.html
<ion-header>
<ion-navbar class="select-header">
<ion-buttons left (click)="close()">
<button ion-button>
<img class="close" src="assets/images/close.png"/>
</button>
</ion-buttons>
<ion-title>{{title}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="region-selection">
<div class="select-all">
<img class="selection not-selected" src="assets/images/region/check_none.png"/>
<span>{{title}}</span>
</div>
<div class="select-region">
<ion-row class="regions-row" *ngFor="let row of rowsArray; let last = last" [ngClass]="{ last: last }">
<ion-col *ngFor="let region of regions | slice:(row*3):(row+1)*3">
<img class="selection not-selected" src="assets/images/region/check_none.png"/>
<span [innerHtml]="region"></span>
</ion-col>
</ion-row>
</div>
</ion-content>
Try placing all your items inside the ion-content and remove the ion-header to have a structure like this
<ion-content class="region-selection">
<div class="outside-element">
<!--element outside of modal-->
</div>
<!--This is your modal header wrapper-->
<div class="modal-header">
<ion-buttons left (click)="close()">
<button ion-button>
<img class="close" src="assets/images/close.png" />
</button>
</ion-buttons>
<ion-title>{{title}}</ion-title>
</div>
<!--This is your modal header wrapper-->
<div class="modal-content">
<div class="select-all">
<img class="selection not-selected" src="assets/images/region/check_none.png" />
<span>{{title}}</span>
</div>
<div class="select-region">
<ion-row class="regions-row" *ngFor="let row of rowsArray; let last = last" [ngClass]="{ last: last }">
<ion-col *ngFor="let region of regions | slice:(row*3):(row+1)*3">
<img class="selection not-selected" src="assets/images/region/check_none.png" />
<span [innerHtml]="region"></span>
</ion-col>
</ion-row>
</div>
</div>
</ion-content>
Now you can use css to style and position the elements using the classes .outside-element , .modal-header , .modal-content
Also, make sure to set your background-color to transparent