To select between 7 different options I would use an IonPicker instead, but that’s a different UI of course.
Not sure if it’s worth trying to use IonSegment in a way it’s probably not designed for. If you have multiple rows, how is the animation supposed to work when you select a button? If you really want to create your own layout it may be easier to write your own custom component.
it is html (orders.html)
<ion-content
class="box-area"
scrollEvents = "true"
(ionScroll)="scroll($event)"
(ionScrollEnd)="ionScrollEnd($event)">
<ion-refresher slot="fixed" (ionRefresh)="refresh(status, $event)">
</ion-refresher>
<div class="not-fount" *ngIf="(orderList$ | async)?.length == 0 && (filter$ | async)?.isFiltered">
Nothing found
</div>
<div #orderList *ngFor="let order of orderList$ | async"
(click)="toItem(order, $event.target)"
class="order orderView"
[ngClass]="{
'notViewOrder': !order?.view,
'yellow-border-color': !order?.view && order?.status == 'ORDER',
'green-border-color': !order?.view && order?.status == 'PICKED-UP'
}">
<ion-grid *ngIf="order?.vehicles" class="vehicles-title">
<ion-row>
<ion-col class="plus-icon">
<img
(click)="order?.vehicles.length > 1 ? order.showVehicles = !order.showVehicles : ''"
data-name="open"
[ngClass]="{
'yellow-filter': order.status == 'ORDER',
'green-filter': order.status == 'PICKED-UP'
}"
src="assets/icon/{{order.showVehicles ? 'sub' : 'plus'}}-circle.svg">
</ion-col>
<ion-col class="content-row blod-font" *ngIf ="order?.vehicles?.length > 0">
{{ order?.vehicles[0]?.year }}
{{ order?.vehicles[0]?.make }}
{{ order?.vehicles[0]?.model }}
</ion-col>
<ion-col class="vehicles-count-col">
<div
[ngClass]="{
'yellow-back': order.status == 'ORDER',
'green-back': order.status == 'PICKED-UP'
}"
class="vehicles-count">
{{ order?.vehicles?.length }}
</div>
</ion-col>
</ion-row>
</ion-grid>
<div class="vehicles-list-area" *ngIf="order.showVehicles && order?.vehicles?.length > 1">
<ion-grid class="vehicles-list blod-font">
<ng-template ngFor let-vehicle [ngForOf]="order?.vehicles" let-i="index">
<ion-row *ngIf="i > 0">
<ion-col>
{{ vehicle?.year }}
{{ vehicle?.make }}
{{ vehicle?.model }}
</ion-col>
</ion-row>
</ng-template>
</ion-grid>
</div>
<div class="line">
<hr/>
</div>
<div class="stops-area">
<ion-grid>
<ion-row>
<ion-col>
<div class="address blod-font">
<img src="assets/icon/map-pin.svg">
{{ order?.origin?.account?.address?.city }},
{{ order?.origin?.account?.address?.state }}
</div>
<div class="date blod-font">
<img class="calendar-icon" src="assets/icon/calendar.svg">
{{order?.origin?.originDate?.startDate | date:'MM/dd'}}
<ng-template [ngIf]="
order?.origin?.originDate?.dateDef == 'Estimated' &&
order?.origin?.originDate?.endDate
">
- {{order?.origin?.originDate?.endDate | date:'MM/dd'}}
</ng-template>
</div>
</ion-col>
<ion-col>
<div class="address blod-font">
<img src="assets/icon/map-pin.svg">
{{ order?.destination?.account?.address?.city }},
{{ order?.destination?.account?.address?.state }}
</div>
<div class="date blod-font">
<img class="calendar-icon" src="assets/icon/calendar.svg">
{{order?.destination?.destinationDate?.startDate | date:'MM/dd'}}
<ng-template [ngIf]="
order?.destination?.destinationDate?.dateDef == 'Estimated' &&
order?.destination?.destinationDate?.endDate
">
- {{order?.destination?.destinationDate?.endDate | date:'MM/dd'}}
</ng-template>
</div>
</ion-col>
</ion-row>
</ion-grid>
</div>
<ion-grid class="dispatcher-row blod-font">
<ion-row class="ion-align-items-end ion-justify-content-end">
<ion-col class="dispatcher-name">
<span
[ngClass] = "{
'yellow-color': order.status == 'ORDER',
'green-color': order.status == 'PICKED-UP'
}">
#{{order?.quoteNumber}}{{order?.ordering ? '.'+order?.ordering:''}}
</span>
<img
[ngClass] = "{
'yellow-filter': order.status == 'ORDER',
'green-filter': order.status == 'PICKED-UP'
}"
class="comfirmed yellow-filter"
src="assets/icon/check-mark.svg"
*ngIf = "order?.isConfirmed">
</ion-col>
<ion-col
[ngClass] = "{
'yellow-color': order.status == 'ORDER',
'green-color': order.status == 'PICKED-UP'
}"
class="price col-fit-content">
<span>
<ion-icon class="price-icon" name="logo-usd"></ion-icon>
{{order?.carrier?.payment?.commission | myCurrency}}
</span>
{{
(order?.carrier?.payment?.terms != 'COD' && order?.carrier?.payment?.terms != 'COP') ?
'BILL' : order?.carrier?.payment?.terms
}}
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
it is global.css. I use this file for tag ion-content
ion-content {
--background: var(--background-color);
color: var(--white);
--padding-bottom: env(safe-area-inset-top);
}
it is css for component
.orderView {
background-color: var(--white);
color: var(--background-color);
}
ion-refresher {
background-color: var(--background-color) !important;
}
.orderView .vehicles-title ion-icon {
color: var(--yellow);
}
.orderView .vehicles-count {
// background-color: var(--yellow);
color: var(--white);
}
// .orderView .dispatcher-name span,
// .orderView .price {
// color: var(--yellow);
// }
.orderView .dispatcher-name span {
font-size: 4.5vw;
}
.orderView .stops-area .date {
color: var(--grey);
}
//
.order:first-child {
margin-top: 2.96vh;
}
.order {
border-radius: 15px;
margin-bottom: 2.96vh;
padding-top:2vw;
padding-bottom: 2vw;
padding-left: 4vw;
padding-right: 4vw;
position: relative;
}
.notViewOrder {
border-left: 1.6vw solid;
// border-left-color: var(--yellow);
padding-left: 2.4vw !important;
}
.line hr {
background-color: var(--background-color);
margin-right: 8.667vw;
margin-left: 3.667vw;
margin-bottom: 10px;
margin-top: 0px;
}
ion-content {
--padding-end: 4.54vw;
--padding-start: 4.54vw;
--padding-bottom: 2.667vw;
}
ion-col {
padding: 0px;
}
ion-grid {
padding: 0px;
}
.vehicles-title {
.content-row {
padding-right: 3.7vw;
padding-left: 3.7vw;
font-size: 4vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.plus-icon {
max-width: fit-content;
img {
width: 5.13vw;
margin-top: 1px;
}
}
.vehicles-count {
height: 5.67vw;
width: 5.67vw;
border-radius: 50%;
font-size: 3vw;
font-weight: bold;
text-align: center;
padding-top: 0.75vw;
}
.vehicles-count-col {
width: 6.4vw;
max-width: fit-content;
}
}
.vehicles-list-area {
margin-bottom: 1vw;
margin-top: 1vw;
.vehicles-list {
font-size: 4vw;
ion-row {
margin-bottom: 0.533vw;
}
}
}
.stops-area {
.address {
font-size: 3vw;
text-align: left;
}
.date {
font-size: 3vw;
text-align: left;
}
img {
width: 2.667vw;
height: 3.2vw;
margin-right: 0.533vw;
}
.calendar-icon {
opacity: 0.5;
}
ion-col:first-child {
padding-right: 0.533vw !important;
border-right: 1px solid var(--background-color);
}
ion-col:last-child {
padding-left: 0.533vw !important;
}
.header {
margin-bottom: 1.333vw;
font-size: 3.467vw;
ion-col {
padding-left: 4vw !important;
}
}
}
.dispatcher-row {
font-size: 3.2vw;
.price span {
font-size: 5.333vw;
}
.price {
text-align: right;
}
.comfirmed {
height: 5.333vw;
margin-left: 1.6vw;
position: relative;
}
}
I found here this discussion on the forum Ionic 3: Part of css not working on Android platform , but the solution that was there did not help me. Could not find the mayi.hss file. And those actions that they proposed to do in the decision led to the fact that after each build the application file grew larger and larger.
Well, the picker might seem like an option.
But than as you say, the whole User Experience would suffer I guess.
I had just hoped that there is an easy solution to my problem but than
it is really not that simple.
Thanks for your help!
Several people have worked on our ionic angular app over the last 12 months (often in isolation), and as a result there are three different firebase plugins used. I’m assuming we don’t need all three, so which ones can be discarded - which is considered the best one - if any?
Salut, moi aussi, j’ai le même problème et le style ne s’applique pas uniquement sur android 7. Les versions inférieures à 7 et supérieures 7, ça fonctionne très bien!
Hi,
I’ve performed the migration from Cordova to Ionic described in:https://ionicframework.com/docs/appflow/cookbook/phonegap-build-migration
and getting the next error when trying to perform: ionic cordova build android
[ERROR] Cannot perform build.
** Since you’re using the custom project type, you must provide the**
** ionic:build npm script so the Ionic CLI can build your project.**
Below is the ionic info output. Any idea?
Many thanks,
Amit
Ionic:
Ionic CLI : 5.4.16 (C:\Users\amitnv\AppData\Roaming\npm\node_modules\ionic)
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, ios 5.1.1
Cordova Plugins : no whitelisted plugins (19 plugins total)
Utility:
cordova-res : not installed
native-run : 1.0.0
System:
Android SDK Tools : 1.0 (D:\AndroidSDK)
NodeJS : v12.16.3 (D:\Program Files (x86)\nodejs\node.exe)
npm : 6.14.5
OS : Windows 10
goRoot() function is not found in navController. is there any other solution.
I only use this. It is also the best maintained.
I have used Firebase SDK to authenticate user via phone number (https://firebase.google.com/docs/auth/web/phone-auth) and it works fine on Ionic lab and on Android.
The problem comes when I test it on iOS. When the function signInWithPhoneNumber(phoneNumber, appVerifier) is called, I get the error Recaptcha Verifier is only supported in a browser HTTP/HTTPS environment.
I am using Ionic 3, Cordova 8, cordova-android 8.0.0 and cordova-ios 5.1.0
Any solution for this?
i am using custom svg icon for ion-icon :-1
and the ion-tab code is:
<ion-tab-bar slot="bottom">
<ion-tab-button tab="explore">
<ion-icon src="../../assets/no upcoming ride/icon-explore@3x.svg"></ion-icon>
<ion-label>Explore</ion-label>
</ion-tab-button>
<ion-tab-button tab="suggested">
<ion-icon src="../../assets/no upcoming ride/icon-suggested@3x.svg"></ion-icon>
<ion-label>Suggested</ion-label>
</ion-tab-button>
<ion-tab-button tab="upcoming">
<ion-icon src="../../assets/no upcoming ride/icon-upcoming@3x.svg"></ion-icon>
<ion-label>Upcoming</ion-label>
</ion-tab-button>
</ion-tab-bar>
i have tried it by changing like this:
ion-tab-button:focus {
ion-icon, ion-label {
color: var(--ion-color-primary) !important;
--ion-color-base: var(--ion-color-primary) !important;
}
}
but nothing worked.
it changed only the label color but the icon color remain the same.
Updating cordova-plugin-printer to v 0.8.0 removed the references to UIWebView. I now need to deal with inappbrowser. Will post my steps here
what i want is:-
calendar with only a week view. no month
as shown in image the calendar should have a header which should have a month name
and the below it i want a sliding date only in a single row
and when a date is selected an event can be shown like in the given picture.
Thanks in advance.
i need to record the video in ionic app and during recording message shown on screen how we do please help.
i already use media-capture-plus plugin.it quite useful but don’t meet with the requirement.
and video-capture-plus plugin was outdated with the configuration.
This is certainly a issue. As i don’t want the tab to be hidden, when keyboard is open. Anyway to override tab-bar-hidden class ?
Thank you!! Thanks a lot : )
I’m having a strange problem where after running --prod to build my APK, both AlertController and ToastController fail to show any messages when they open. The Alert shows the header and the buttons, but no message. I’ve tried many things including creating a very basic ion-button with a click event to directly trigger an async method which creates and presents a toast with no variables or anything fancy, and it still will not show a message after running --prod. Any other method of building the app; serve, emulate, run, build as long as they do not have the --prod argument to minify the code, works absolutely perfectly.
I’ve found a few similar instances in threads across the internet, but have never found one which had a solution!
Any and all help is greatly appreciated!
Finally, when i was working on that project i decided to create my own tab component as removing the class was possible but it was a little dirty. Hope it helps
Creating own tab component is time consuming for us. Anyway thanks for inputs @dnietoandres 
I am currently implementing ion-menu into my app. By default, using the ion-menu-button will toggle the menu hide or unhide.
I want to keep that for the mobile version. However for desktop version, what I would like is to not having the ion-menu completely hidden but instead show partial of it (just the menu icon). So in essence, ion-menu is always stickied there but it’s only being minimized to the left-side. Is that kind of display possible to achieve?
Illustrations below:
