Ionic segment button issue - ionic-framework

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>

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.

ion-segment with multiple lines

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>

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/

Change width ionic columns depending on the device

I need make something like this example of boostrap grid system
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
Please help me!!
Use wrap in ion-row
<ion-grid>
<ion-row wrap>
<ion-col col-12 col-md-6 col-lg-3>
</ion-col>
</ion-row>
</ion-grid>