Search code examples
ionic-frameworkionic4

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?

Solution

  • 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