CODEWITHSUNDEEP
ionic-frameworkionic4
el-niko
el-niko

Reputation: 113

Ionic4: List item with multiple controls (inputs and checkbox) on one line

I have the following code to show multiple controls (label, 2 inputs and checkbox) on one line

<ion-list>
    <ion-item>
        <ion-label slot="start">1</ion-label>
        <ion-input col-6></ion-input>
        <ion-input col-6></ion-input>
        <ion-checkbox slot="end"></ion-checkbox>
    </ion-item>
</ion-list>

On Android it works good, but on iOS i have unexpected behavior: When I Tap checkbox, system tries to open Keyboard but didn't show it, so that i getting a free space in the bottom of the page:

enter image description here

How to fix this behavior or maybe you know another way how to show multiple controls on one line?

Upvotes: 1

Views: 414

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

A better way to build that layout could be by using rows and columns.

Please take a look at this Stackblitz demo

This is the code of the view:

<ion-header>
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <ion-row *ngFor="let row of rows">
    <ion-col>
      <ion-label>{{ row }}</ion-label>
    </ion-col>
    <ion-col>
      <ion-input></ion-input>
    </ion-col>
    <ion-col>
      <ion-input></ion-input>
    </ion-col>
    <ion-col>
      <ion-checkbox></ion-checkbox>
    </ion-col>
  </ion-row>
</ion-content>

And then I'm setting some styles to set the width of the first and the last columns:

ion-row {
  ion-col {
    display: flex;
    align-items: center;
    justify-content: center;

    &:first-child {
      flex-basis: 16px;
      flex-shrink: 0;
      flex-grow: 0;
    }

    &:last-child {
      flex-basis: 32px;
      flex-shrink: 0;
      flex-grow: 0;
    }
  }
}

In the demo the inputs have some background just so that's easier to know what their width is.

demo

Upvotes: 1

Related Questions