ion-segment with multiple lines - ionic-framework

Trying to fit 6 elements in 1 or 2 lines (depends on the screen width) without success. Got partial success by adding and elements. Elements separate nicely in 2 lines if necessary but a strange glitch appears: if I click on the selected button once again selection disappears entirely.
Here is a code:
<ion-segment [(ngModel)]="doorColour" value="white">
<ion-grid>
<ion-row>
<ion-segment-button value="white">
<ion-label>White</ion-label>
</ion-segment-button>
<ion-segment-button value="sandstone">
<ion-label>Sandstone</ion-label>
</ion-segment-button>
<ion-segment-button value="almond">
<ion-label>Almond</ion-label>
</ion-segment-button>
<ion-segment-button value="bronze">
<ion-label>Bronze</ion-label>
</ion-segment-button>
<ion-segment-button value="black">
<ion-label>Black</ion-label>
</ion-segment-button>
<ion-segment-button value="forest green">
<ion-label>Forest Green</ion-label>
</ion-segment-button>
</ion-row>
</ion-grid>
</ion-segment>
Please advise.

Use scrollable with mode='md' to scrollable segment
<ion-segment [(ngModel)]="doorColour" value="white" scrollable mode="md">
<ion-segment-button value="white">
<ion-label>White</ion-label>
</ion-segment-button>
<ion-segment-button value="sandstone">
<ion-label>Sandstone</ion-label>
</ion-segment-button>
<ion-segment-button value="almond">
<ion-label>Almond</ion-label>
</ion-segment-button>
<ion-segment-button value="bronze">
<ion-label>Bronze</ion-label>
</ion-segment-button>
<ion-segment-button value="black">
<ion-label>Black</ion-label>
</ion-segment-button>
<ion-segment-button value="forest green">
<ion-label>Forest Green</ion-label>
</ion-segment-button>
</ion-segment>

Use swipe-gesture="false"
<ion-segment [(ngModel)]="doorColour" value="white" swipe-gesture="false">
<ion-grid>
<ion-row>
<ion-segment-button value="white">
<ion-label>White</ion-label>
</ion-segment-button>
<ion-segment-button value="sandstone">
<ion-label>Sandstone</ion-label>
</ion-segment-button>
<ion-segment-button value="almond">
<ion-label>Almond</ion-label>
</ion-segment-button>
<ion-segment-button value="bronze">
<ion-label>Bronze</ion-label>
</ion-segment-button>
<ion-segment-button value="black">
<ion-label>Black</ion-label>
</ion-segment-button>
<ion-segment-button value="forest green">
<ion-label>Forest Green</ion-label>
</ion-segment-button>
</ion-row>
</ion-grid>
</ion-segment>

Related

ion-toolbar in header make ion content not scrollable

I'm using ionic to build a web app.
My template is:
<ion-header>
<ion-toolbar class="large-title-fix">
<ion-title>MyLinkedin</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-segment [(ngModel)]="type">
<ion-segment-button value="Applicant" >
<ion-label>Applicant</ion-label>
</ion-segment-button>
<ion-segment-button value="Offeror">
<ion-label>Offeror</ion-label>
</ion-segment-button>
<ion-segment-button value="Company">
<ion-label>Company</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>
<app-sign-up-applicant *ngIf="type==='Applicant'"></app-sign-up-applicant>
<app-sign-up-offeror *ngIf="type==='Offeror'"></app-sign-up-offeror>
<app-sign-up-company *ngIf="type==='Company'"></app-sign-up-company>
</ion-content>
but this make the ion content not entirely scrollable
Here's a gif to display what happen
It seems like it can scroll, but it doesn't show the entire content of the page
Edit: the problem, in some way, is the toolbar, in fact if I remove the toolbar, It works.
I can't understand why.

Ionic segment button issue

I have created three ion segment buttons. How to fix the buttons fit to the screen? As you can see in the image below, the segment buttons are automatically placed in the center. I'm unable to make the buttons stretch.
<ion-segment>
<div>
<ion-segment-button value="p1" >
<ion-label><b>Person 1</b></ion-label>
</ion-segment-button>
</div>
<div>
<ion-segment-button value="p2">
<ion-label><b>Person 2</b></ion-label>
</ion-segment-button>
</div>
<div>
<ion-segment-button value="p3">
<ion-label><b>Person 3</b></ion-label>
</ion-segment-button>
</div>
</ion-segment>
You can use ion-row and ion-col like this:
<ion-row>
<ion-segment>
<ion-col>
<ion-segment-button value="p1" >
<ion-label><b>Person 1</b></ion-label>
</ion-segment-button>
</ion-col>
<ion-col>
<ion-segment-button value="p2">
<ion-label><b>Person 2</b></ion-label>
</ion-segment-button>
</ion-col>
<ion-col>
<ion-segment-button value="p3">
<ion-label><b>Person 3</b></ion-label>
</ion-segment-button>
</ion-col>
</ion-segment>
</ion-row>

Is there a way to make ion-segment look the same on both iOS and Android?

After setting the mode of ion-segment, they still look different after rendering them in ionic lab.
I have tried setting the mode of ion-segment and ion-toolbar to "md" but they still look different.
https://ibb.co/HV75Ly2 Here is an image of what they look like after setting the mode.
<ion-toolbar mode="md">
<ion-segment scrollable mode="md">
<ion-segment-button value="top" checked>
TOP
</ion-segment-button>
<ion-segment-button value="nfl">
NFL
</ion-segment-button>
<ion-segment-button value="nba">
NBA
</ion-segment-button>
<ion-segment-button value="mlb">
MLB
</ion-segment-button>
<ion-segment-button value="nhl">
NHL
</ion-segment-button>
<ion-segment-button value="ncaaf">
NCAAF
</ion-segment-button>
<ion-segment-button value="ncaab">
NCAAB
</ion-segment-button>
</ion-segment>
</ion-toolbar>
I would like the ion-segment to look like the android version on both platforms but currently, they still look different.
Since one of the Ionic 4 beta's you also have to set mode on every component.
This means the ion-segment-button components as well, like:
<ion-toolbar mode="md">
<ion-segment scrollable mode="md">
<ion-segment-button mode="md" value="top" checked>
TOP
</ion-segment-button>
<ion-segment-button mode="md" value="nfl">
NFL
</ion-segment-button>
<ion-segment-button mode="md" value="nba">
NBA
</ion-segment-button>
<ion-segment-button mode="md" value="mlb">
MLB
</ion-segment-button>
<ion-segment-button mode="md" value="nhl">
NHL
</ion-segment-button>
<ion-segment-button mode="md" value="ncaaf">
NCAAF
</ion-segment-button>
<ion-segment-button mode="md" value="ncaab">
NCAAB
</ion-segment-button>
</ion-segment>
</ion-toolbar>

Ionic 3: Displaying an ion-searchbar and ion-segment-buttons inline

How does one display an ion-searchbar and an ion-segment inline in the same ion-toolbar? I'm using Ionic 3.
(in case you're curious, this is landscape-mode-only thing because in landscape mode vertical space is at a premium).
I'm (mostly) able to get this to work with ion-col, as seen below. Everything looks good in Chrome via Ionic Serve. But when running on a real device, the ion-segment gets pushed down and doesn't look right.
Example code below:
<ion-toolbar color="primary">
<ion-row>
<ion-col no-padding>
<ion-segment [(ngModel)]="joined" (ionChange)="switchView($event)" color="light">
<ion-segment-button [value]="true">
{{'PROJECT_JOINED_BUTTON' | translate}}
</ion-segment-button>
<ion-segment-button [value]="false">
{{'PROJECT_LIST_BUTTON' | translate}}
</ion-segment-button>
</ion-segment>
</ion-col>
<ion-col no-padding>
<ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>
</ion-col>
</ion-row>
</ion-toolbar>
How it looks in Chrome via Ionic Serve when spoofing iPhone mode
How it looks on a real iOS device:
What works:
I am able to get buttons to align to the end using ion-buttons end. However, when I wrap the ion-segment inside an ion-buttons, the segment doesn't appear at all. When I try applying the end attribute to the ion-segment, the segment overlays the search bar.
<ion-toolbar color="primary">
<ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>
<ion-buttons end>
<button ion-button clear>
Test Button
</button>
</ion-buttons>
</ion-toolbar>
Is there a way to reliably display an ion-segment inline with other content inside an ion-toolbar? Thanks!
Try using align-items-center and col-6 like:
<ion-toolbar color="primary">
<ion-grid>
<ion-row align-items-center>
<ion-col no-padding col-6>
<ion-segment [(ngModel)]="joined" (ionChange)="switchView($event)" color="light">
<ion-segment-button [value]="true">
{{'PROJECT_JOINED_BUTTON' | translate}}
</ion-segment-button>
<ion-segment-button [value]="false">
{{'PROJECT_LIST_BUTTON' | translate}}
</ion-segment-button>
</ion-segment>
</ion-col>
<ion-col no-padding col-6>
<ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
documentation: https://ionicframework.com/docs/api/components/grid/Grid/

Ionic 2, ion-content of subcomponent overlapped by ion-header

I have a page with an <ion-segment> that I use as a Tab to switch between showing two different custom components:
<ion-header>
<ion-navbar>
<ion-title>Page</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-segment [(ngModel)]="tab">
<ion-segment-button value="section1">
Section 1
</ion-segment-button>
<ion-segment-button value="section2">
Section 2
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<section1 *ngIf="tab === 'section1'"></section1>
<section2 *ngIf="tab === 'section2'"></section2>
The section components just have an <ion-content> with stuff in it.
The problem is that if I do it this way, the content of the pages will be overlapped by the header. I've tried different ways to avoid this without success.
One way is to put the <ion-content> into the page like this:
<ion-content>
<section1 *ngIf="tab === 'section1'"></section1>
<section2 *ngIf="tab === 'section2'"></section2>
</ion-content>
But this gives rise to a new problem. If the page contains an <ion-refresher> it will give this error: Template parse errors: No provider for Content. Moving the refresher into the page as well isn't an option.
How to solve this overlapping issue while still keeping the <ion-content> in the custom components?