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.
Related
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,
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 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
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>
Ionic Swipe Left does not work with item-icon-right
Plunker showing the behavior
I'm running into some confusing behavior. With an ion-list and ion-items, I'm setting attributes to enable swiping.
<ion-list can-swipe="true">
<ion-item ng-repeat="element in ctrl.data" class="item-remove-animate item-icon-right">
<span>{{ element }}</span>
<span class="item-note">Date</span>
<i class="icon ion-chatbubble-working"></i>
<ion-option-button class="button-assertive icon ion-trash-a" ng-click="ctrl.delete($index) ">
</ion-option-button>
</ion-item>
</ion-list>
However, there's two issues that I'm running into
The remove animation does not ever seem to work
If set "item-icon-right" on the ion-list, then the swipe messes up completely. If I add an "i" tag with the class, swipe works.
Does anyone know why this is happening? I'm new to CSS and ion, so it's a bit difficult for me to know what to look for while debugging.
If you could tell me your thought process or point to related articles for debugging these unexpected behaviors, I'd really appreciate it
For deletion animation, it seems that collection-repeat does not add "ng-leave" class due to a performance hit. (ref)
For the swipe left bug, I had to remove "icon" from the ion-option class.
Here a Sample hope this help you
<ion-list class"animate-ripple" show-delete="false" can-swipe="true" swipe-direction="both">
<ion-item ng-show="orders_list.length==0">
<h2>No orders, Please go to Menu and Select Create a Order</h2>
</ion-item>
<ion-item item="order"
ng-repeat="order in orders_list | custom:filterOrder"
class="item-text-wrap" >
<a class="item item-icon-right" style=" border:none; text-align:left"
ng-click="showOrdersDetail(order.order_id)">
<i class="icon ion-chevron-right"></i>
<h2>Order No. {{order.order_id}}</h2>
<h5>TOTAL:{{order.total_pagar}}</h5>
<h5>ITEMS:{{order.total_items}}</h5>
</a>
<div ng-if="filterOrder.tipo_estado === 'ACT'">
<ion-option-button class="button-assertive" ng-click="del_order(order,{{$index}});">
Del
</ion-option-button>
<ion-option-button class="button-balanced" ng-click="pay_order(order);">
Pay
</ion-option-button>
</div>
<div ng-if="filterOrder.tipo_estado === 'PAG'">
<ion-option-button class="button-balanced" ng-click="showLinceseList(order.order_id);">
Apply a<br> License
</ion-option-button>
</div>
</ion-item>
</ion-list>