I am using ionic inside an angular project. I try to make the ion-modal auto height, so there will not be extra white space for some modal.
However, after I set the height to auto in css, the modal only show the 2 buttons in ion-header, it won't show other ion-content anymore. How do I make it so the height is auto but includes the ion-content?
The code for the modal inside html is as followed.
<ion-modal [isOpen]="openSensor" [backdropDismiss]="false">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button>ButtonA</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button [strong]="true">ButtonB</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-item>
<ion-label position="stacked">Tag</ion-label>
<ion-input type="text" placeholder="Full Name" [(ngModel)]="fullName"></ion-input>
</ion-item>
</ion-content>
</ng-template>
</ion-modal>
And this is the global style.css file that related to modal
ion-modal.stack-modal {
--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}
ion-modal {
--height: auto;
--border-radius: 16px;
}
Thanks in advance.
You can find the answer to your question here
Related
I am having trouble positioning this picker at the top of the screen. I have tried overriding many css properties with no success.
I am unable to override the required classes. .sc-ion-picker-md-h
<ion-header>
<ion-toolbar color="custom">
<ion-buttons slot="start">
<ion-menu-toggle><ion-icon name="menu-outline" style="font-size: 30px; color: white !important;"></ion-icon>
</ion-menu-toggle>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>Notification Time</ion-label>
<ion-grid>
<ion-row justify-content-center align-items-center>
<ion-datetime display-format="h:mm A" picker-format="h:mm A" value="1990-02-19T07:43Z" style="height: 100% !important;"></ion-datetime>
</ion-row>
</ion-grid>
</ion-item>
</ion-content>
I managed to get it on top by putting this in the theme/variables.css file:
/** Ionic CSS Variables **/
.picker-wrapper.sc-ion-picker-md {
bottom: auto;
top: 0;
}
(I tested using React, but I guess this should work the same way using Angular or pure js)
I have tabs page app. I have a background image like so. How can I have transparent tabs as shown below?
home.html
<ion-content class="content" fullscreen>
<ion-grid>
<ion-row class="ion-margin-top row1">
<ion-col size="12" class="ion-text-center">
</ion-col>
</ion-row>
<ion-row class="ion-margin-top row2">
<ion-col size="6" *ngFor="let b of buttons;" class="padding">
<app-home-root [data]="b"></app-home-root>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
home.scss
ion-content {
--background: url('/assets/img/stella/background/background.png') no-repeat 100% 100%;
}
tabs.page.html
<ion-tabs>
<ion-tab-bar class="tab" slot="bottom" translucent="true">
<ion-tab-button (click)="profileAction()">
<ion-img [src]="myProfileSrc"></ion-img>
<ion-label>
My Profile
</ion-label>
</ion-tab-button>
<ion-tab-button (click)="openBooking()">
<ion-img [src]="bookNowSrc"></ion-img>
<ion-label>Book Now</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
This is what I have now with translucent="true"
Ion-content doesn't continue under the tabs (this can be seen when you inspect it when you run it in a browser), so making the tabs transparent would only show you the background color of the app. I don't know if it is possible to even make it transparent, but because it makes no difference you could always just apply a background color to ion-tabs (the same color as your ion-content is).
Edit:
And if you want to remove the border too, this should be enough:
ion-tab-bar {
--background: #FFF;
border-style: none;
}
If you still see a border you can always add border: 0;.
I want to separate my <ion-checkbox> from <ion-label>. So the main issue is that I have to display additional informations if you click on the label, but you should not activate the checkbox. The checkbox should only be activated, if clicked on the "checkbox icon/checkbox square".
<div>
<ion-list>
<ion-item *ngFor="let list of list">
<ion-label (click)="showAdditionalInformations()">{{list.item.free_text}}</ion-label>
<ion-checkbox *ngIf="list.item.checkbox==true"></ion-checkbox>
</ion-item></ion-list>
</div>
Can someone help me?
This does not work with Ionic 4 because Shadow Dom creates a button element that overlays the label element and captures the click events.
A workaround for Ionic 4 is to wrap the ion-checkbox with a span, and make it relative.
This way, the button in the Shadow Dom will fit only this new span, keeping the label free to asign a custom click event.
<span class="checkbox-container">
<ion-checkbox slot="end" formControlName="accept"></ion-checkbox>
</span>
.checkbox-container {
position: relative;
}
For ionic-4, give the property "position:relative" to ion-checkbox. It works !
ion-checkbox {
position:relative;
}
You can try to add this piece of code to your CSS. It will hide the overlay which wraps both your checkbox and your label.
ion-checkbox .item-cover{
display:none;
}
This did the trick for me:
ion-checkbox {
.item-cover {
width: 70px;
}
}
For ionic 4 there is a workaround by using the start slot of ion-item as laid out here.
<ion-item lines="full">
<ion-icon slot="start" name="at" (click)="iconClicked()"></ion-icon>
<ion-label slot="start" (click)="labelClicked()">
This is a separately clickable label
</ion-label>
<ion-checkbox slot="end"></ion-checkbox>
</ion-item>
With lines="full" the bottom border is fixed.
For whoever gets here via Google like me, using Ionic 6 (2022) - I resolved this issue giving the label a z-index:3.
This also works for an ion-button slotted at end.
<ion-item>
<ion-label>Select/unselect all</ion-label>
<ion-checkbox slot="start" (ionChange)="selectAllFarmers($event)"></ion-checkbox>
<ion-button style="z-index:3" slot="end" (click)="exportSelectedFarmers(remoteFarmers)">Export selected</ion-button>
<ion-button style="z-index:3" slot="end" (click)="finaliseSelected()">Finalise farmers</ion-button>
</ion-item>
Credits: https://rubberchickin.com/how-to-fix-ion-checkbox-stealing-clicks-on-ion-item-elements/
index behind other div
I drawed a red ligne where the index were
so i have a div which is fixed, but with my ion-refresher,
the fixed div seem to go in absolute when i pull to refresh, i don't know how to fix this.
here my code
.alphabetItem {
color: #ffffff;
font-size: 10px;
position: fixed;
z-index: 99999999;
right: -4%;
top : 200px;
}
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Tirer pour rafraîchir" refreshingSpinner="circles" refreshingText="Relâcher pour rafraîchir ...">
</ion-refresher-content>
</ion-refresher>
<ion-col col-1 class="alphabetItem" scrollY="true" style="width:100%; height:100%">
<div class="divLetter" *ngFor="let letter of alphabets" (click)="alphaScrollGoToList(letter)">
{{letter}}
</div>
</ion-col>
Try to use ion-toolbar component from Ionic Framework (https://ionicframework.com/docs/api/components/toolbar/Toolbar/).
<ion-header>
<ion-toolbar>
<!-- your fixed col -->
</ion-toolbar>
</ion-header>
<ion-content>
...
<!-- your content + refresher -->
...
</ion-content>
The ion-refresher is a really special component. No matter where you place it, it will be put at the top of the nearest ion-content. When you refresh, it will move down your scroll-content, where your fixed container is placed in. <ion-toolbar> should fix this problem.
I am looking to add some labels to an Ionic 2 range element (the documentation for which can be found at http://ionicframework.com/docs/v2/api/components/range/Range/)
You can add a label at the beginning and end using the following markup
<ion-range min="-200" max="200" [(ngModel)]="saturation" color="secondary">
<!-- Setting the labels here -->
<ion-label range-left>-200</ion-label>
<ion-label range-right>200</ion-label>
</ion-range>
I would however like to add some labels throughout the range, on either side if possible in an attempt to make it look more like a progress bar. So you might have labels like 25%, 50% etc ..
What would be a good way to approach this, without interfering too much with the Ionic HTML?
My approach so far is just to create an ion-row above the range, then use css to place it.
HTML
<!-- TIMELINE -->
<div class='timeline'>
<ion-grid class="timeline-grid">
<ion-row class="timeline-labels">
<ion-col width-20>Label One</ion-col>
<ion-col width-20>Label Two</ion-col>
<ion-col width-20>Label Three</ion-col>
<ion-col width-20>Label Four</ion-col>
<ion-col width-20>Label Five</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-range color='secondary' [(ngModel)]="progress">
</ion-range>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</div>
CSS
ion-row.timeline-labels {
padding-left: 20px;
z-index: 1;
position: absolute;
top: 10px;
}
Which does in a way work, however I am thinking there is maybe a better/cleaner way to go about it.
Any advice would be great.
Thanks!
Wouldn't setting the pin="true" (in the range slider tag) basically do what you want?
It would show the current value of the slider like a progress bar would.
If you are looking to achieve more of a specified label at the bottom at specific points I think the best way would be to add a div with spans directly below the range slider and then toy with the CSS till its close enough to what you want.
main css issues will be removing padding or margin space around the Range element, and then getting the font size and spacing of the 'progress' in the right spots.
eg.
<ion-range min="0" max="100" pin="true">
<!-- Setting the labels here -->
<ion-label range-left>0</ion-label>
<ion-label range-right>100</ion-label>
</ion-range>
<div>
<span>20%<span>
<span>40%<span>
<span>80%<span>
<span>100%<span>
</div>
This might be too late but for others looking in the future I put my labels inside of spans within a label below and used css to style the padding and width.
Here is my HTML:
<div class="slide-rating">
<ion-range min="1" max="4" step="1" snaps="true" ticks="false" ></ion-
range>
<ion-label class="rating-labels">
<span> Beginner </span>
<span> Casual </span>
<span> Advanced </span>
<span> Expert </span>
</ion-label>
</div>
And my CSS:
span{
color: #354D37;
font-family: Gotham-Book;
font-size: small;
padding-left: 12px;
}
.slide-rating{
align-items: center;
width: 80%;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}
.rating-labels{
margin-left: -5%;
margin-right: -5%;
text-align: center;
}