I have this html :
<ion-item text-wrap>
<p class="fw-bold">Rules & Guidelines </p> <br />
<ion-text>
<ion-icon name="american-football" item-start></ion-icon>
<ion-label>
Voucher terms & conditions
</ion-label>
<ion-toggle color="secondary" item-end></ion-toggle>
</ion-text>
</ion-item>
Now I want to display like this :
First line : Rules & Guidelines
Second line : icon Voucher terms & conditions toogle
Now I have all this content in one line, like this
Try this,
<ion-item><b>Rules & Guidelines</b></ion-item>
<ion-item>
<ion-icon name="american-football" slot="start"></ion-icon>
<ion-label>
Voucher terms & conditions
</ion-label>
<ion-toggle color="secondary" slot="end"></ion-toggle>
</ion-item>
You should get this,
Related
I am generating a bunch of slides with questions; The last slide is an overview of the previous answered questions. On the bottom I have a submit button that I want to always be visible on that (last) slide at the bottom of the page.
I tried the following:
Use a ion-fab-button, which doesnt stick.
Use CSS with "position: sticky !important;" on the button
Wrap everything but the button in a ion-card-content
<ion-slide>
<ion-card>
<h1>Questions Overview</h1>
<ion-list *ngFor="let question of questions">
<ion-item>
<ion-label>
Question: {{ question.question }}
</ion-label>
</ion-item>
<ion-item>
<ion-label>
Your Answer: {{ question.answer }}
</ion-label>
</ion-item>
</ion-list>
<ion-button (click)="onSubmit()" expand="full">Submit</ion-button>
</ion-card>
</ion-slide>
I am not that experienced in the framework so I dont if there is something else I could try.
When using google I only found questions and answers about buttons outside of ion-content. This doesnt help since everything used on the page is in ion-content and if I would do it this way the button will also be shown on all the other slides.
Edit:
TL;DR Workaround:
#ViewChild('slides', {read: IonSlides}) slides: IonSlides; in .ts file
Use Event (ionSlideReachEnd)="onEnd()" on <ion-slides> in .html
onEnd() {
this.slides.isEnd().then(endReached => {
this.reachedEnd = endReached // reachedEnd is a variable that can be checked in the html file
}
I have used a workaround until I find a proper solution. I use the above used code to check if I have reached the end of my slides. After this I display a ion-footer which contains the button. The footer is stickied on the bottom of the page and not to the slides like I want to have it. The additional bonus is that now the user always has the ability to submit on any slide when reviewing his answers.
A simple *ngIf can do the job for you... so we put the condition that the button will only be visible on the last slide, we know that the array index of the last slide will be equal to the length of the array -1... hence we put the condition: <ion-button *ngIf='idx==questions.length-1' (click)="onSubmit()" expand="full">Submit</ion-button>
relevant HTML:
<ion-content padding>
<ion-slides>
<ion-slide *ngFor="let question of questions; let idx = index">
<ion-card>
<h1>Questions Overview</h1>
<ion-list>
<ion-item>
<ion-label>
Question: {{ question.question }}
</ion-label>
</ion-item>
<ion-item>
<ion-label>
Your Answer: {{ question.answer }}
</ion-label>
</ion-item>
</ion-list>
<ion-button *ngIf='idx==questions.length-1' (click)="onSubmit()" expand="full" style='border:2px solid red;padding:5px; margin:5px; background:lightpink; position: absolute; bottom: 0%; left:50%; margin-left:-17px'>Submit</ion-button>
</ion-card>
</ion-slide>
</ion-slides>
</ion-content>
check the about tab on the working stackblitz here
I want to make a 2-column responsive system. I want the badge (2) to have a column of the exact size of the content of it and the column (1) has the space it deserves. how can I do it? This is my code:
<ion-grid no-padding>
<ion-row>
<ion-col col-10>
<h4 >
<strong>{{ antecedentAlert.antPac.get_tipo_antecedente.nombre }}</strong>
<span *ngIf="antecedentAlert.antPac.get_subtipo_antecedente != null">
: {{ antecedentAlert.antPac.get_subtipo_antecedente.nombre }}
</span>
.
.
.
</ion-col>
<ion-col col-auto>
<span class="contenedor-badge-icon">
<ion-badge class="badge-estado-ant" color="azul-2" *ngIf="antecedentAlert.antPac.validado == 'validado' ">Validado</ion-badge>
<ion-badge class="badge-estado-ant" color="danger" *ngIf="antecedentAlert.antPac.validado == 'no validado' ">No validado</ion-badge>
<ion-badge class="badge-estado-ant" color="naranja-2" *ngIf="antecedentAlert.antPac.validado == 'pendiente' "><ion-icon class="candado-antecedentes" [name]="antecedentAlert.antPac.privado=='1'?'lock':''" [color]="white"></ion-icon> Por validar</ion-badge>
</span>
</ion-col>
</ion-row>
</ion-grid>
Actual result:
Change col-10 of column 1 to col-12 col-sm.
What you need to do is replace col-10 for col-xs-10. When there's no breakpoint specified Ionic'll fallback to sm breakpoint, whose by default is (min-width: 576px), so that's why your grid breaks to a second row when in a small viewport device. This way the col-auto of your badges column will work perfectly.
Hope this helps.
I have a chat application, when I click into the textarea to start typing a new message the keyboard pushes up all the content above. This means that the ion-header disappears. I would like this to remain visible at the top of the screen at all times.
Here is an example GIF: https://i.imgur.com/a/GcmagJi
The ion-header code is:
<ion-header>
<ion-navbar>
<ion-buttons ion-fixed end>
<button ion-button icon-only (click)="closeChat()">
<ion-icon name="close-circle"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
The ion-footer code is:
<ion-footer>
<ion-grid>
<ion-row>
<ion-col col-9>
<textarea rows="3" [(ngModel)]="data.message" (keyup.enter)="sendMessage()" placeholder="Type your message ..."></textarea>
</ion-col>
<ion-col col-3>
<button ion-button (click)="sendMessage()">Send</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
In my app.module.ts file I have used:
imports: [
BrowserModule,
LongPressModule,
IonicModule.forRoot(MyApp, {
scrollPadding: false,
scrollAssist: true,
autoFocusAssist: false
}
),
IonicStorageModule.forRoot(),
DragulaModule,
HttpModule
]
In my chat.ts I have:
constructor(private keyboard: Keyboard) {
this.keyboard.disableScroll(false);
}
Despite all of these things nothing seems to keep the header fixed in place.
I have added the full code for my chat.html and chat.ts to the GitHib Gists below:
https://gist.github.com/christopherib/4b9e70590fb322bdc33ffbbe42d50685
https://gist.github.com/christopherib/cb3d234564c0feb1e8bf5b96f8d023c3
Try to run keyboard.disableScroll(true) right after platform.ready()
Or try to run keyboard.hideFormAccessoryBar(false);
Have you tried using?
<ion-content fullscreen><ion-content>
I'm currently using Ionic 4 and the header still looking good when the keyboard opens
I have the following structure
<ion-header no-border>
<ion-toolbar>
<ion-fab-button>
<ion-icon name="ios-arrow-back"></ion-icon>
</ion-fab-button>
<ion-title></ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
......
</ion-content>
<ion-footer no-border>
......
</ion-footer>
When the keyboard appears, run a js function. When doing so, give the header a negative margin.
Ex:
function myFunction() {
document.getElementById("myDiv").style.marginBottom = "-15px";
}
Source: https://www.w3schools.com/jsref/prop_style_marginbottom.asp
There is probably more efficient solution but if position:fixed doesn't work this is the best one I can come up with.
You can use ion-item-divider under the ion-header like
<ion-header>
<ion-item-divider sticky>
<!-- Content -->
</ion-item-divider>
</ion-header>
sticky properties used to when header up the they fixed on top
I got a problem while updating my Ionic checkbox values to Firebase.
Here is my HTML:
<ion-list>
<ion-item>
<ion-label>Problemfeld 1</ion-label>
<ion-checkbox checked="false" [(ngModel)]="problemfeld1" name="problemfeld1"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Problemfeld 2</ion-label>
<ion-checkbox checked="false" [(ngModel)]="problemfeld2" name="problemfeld2"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Problemfeld 3</ion-label>
<ion-checkbox checked="false" [(ngModel)]="problemfeld3" name="problemfeld3"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Problemfeld 4</ion-label>
<ion-checkbox checked="false" [(ngModel)]="problemfeld4" name="problemfeld4"></ion-checkbox>
</ion-item>
</ion-list>
<button ion-button (click)="updateProblemfeld()" [navPush]="problemdefinitionPage">Weiter</button>
This is the function in my Ionic Page:
updateProblemfeld(problemfeld1, problemfeld2,problemfeld3,problemfeld4) {
this.szenarioProvider.updateProblemfeld(problemfeld1, problemfeld2, problemfeld3, problemfeld4);
}
And this is how I pass it to Firebase:
updateProblemfeld(problemfeld1: boolean, problemfeld2: boolean, problemfeld3: boolean, problemfeld4: boolean): firebase.Promise<any> {
return firebase.database().ref('/szenarioData')
.child(firebase.auth().currentUser.uid)
.child('problemfeld').update({
problemfeld1: problemfeld1,
problemfeld2: problemfeld2,
problemfeld3: problemfeld3,
problemfeld4: problemfeld4,
});
}
And this is what the Error looks like:
Firebase.update failed: First argument contains undefined in property 'szenarioData.hR4feTPka8fuMDGK3YV0nFrDs1A3.problemfeld.problemfeld1'
Can you think of a solution for this?
Thanks in advance.
My god,
I looked for a solution for 2 days till I decided to ask this question.
And 30 minutes after asking I found it:
Button in the HTML document needs to be like this:
<button ion-button (click)="updateProblemfeld(problemfeld1, problemfeld2, problemfeld3, problemfeld4)" [navPush]="problemdefinitionPage">Weiter</button>
I simply forgot to pass the values...
in ionic 2, I want to customize the ion-range to be something like the following
pic, or I should say : is there way to customize ion-range ?:
here is my code
<ion-row>
<ion-item>
<ion-range min="500" max="1500" step="500" snaps="true" color="secondary"></ion-range>
</ion-item>
</ion-row>
and here is my range
I did find out how to customize "ion-range", and here is what I built (I know it look not exact):
here are my steps:-
1- add these line of codes shown on picture to your src\theme\variables.scss
Note: there is many variables you can use to customize your ion-range in the folowing link ionic2 docs
2- here is my component code:
<ion-footer>
<ion-toolbar>
<ion-row>
<ion-col width-33 text-left>
Sedan
</ion-col>
<ion-col width-33 text-center>
SUV
</ion-col>
<ion-col width-33 text-right>
LUX
</ion-col>
</ion-row>
<ion-range (ionChange)="selectCar()" min="500" max="1500" step="500" snaps="true" [(ngModel)]="value">
</ion-range>
</ion-toolbar>
</ion-footer>