Squeezing images closer to make room for ion-text

Ionic Framework
1

Hi all.
I’m filling an ion-toolbar with an ion-item to hold 5 images and 1 ion-input in between. This is what I’m after:

image

The images are too far from one another leaving not enough room for the ion-input. This is what I have as a result:

image

The ion-input should be the third element (after the the first two images).

This is my code for this toolbar and its css:

<ion-toolbar>

  <ion-item class="bottom-toolbar">

    <ion-thumbnail slot="start">

      <img src="/assets/media/toolbar-bottom-tools.png">

    </ion-thumbnail>

    <ion-thumbnail slot="start">

      <img src="/assets/media/toolbar-bottom-skip.png">

    </ion-thumbnail>

    <ion-thumbnail slot="start">

      <img src="/assets/media/toolbar-bottom-lesson.png">

    </ion-thumbnail>

    <ion-thumbnail slot="start">

      <img src="/assets/media/toolbar-bottom-hint.png">

    </ion-thumbnail>

    <ion-thumbnail slot="start">

      <img src="/assets/media/toolbar-bottom-solution.png">

    </ion-thumbnail>

    <ion-thumbnail slot="start">

      <img src="/assets/media/toolbar-bottom-useful.png">

    </ion-thumbnail>

  </ion-item>

  <ion-item class="bottom-toolbar-interaction">

    <ion-thumbnail slot="start">

      <img src="/assets/media/bottom-interaction-attention.png">

    </ion-thumbnail>

    <ion-thumbnail slot="start">

      <img src="/assets/media/bottom-interaction-imogi.png">

    </ion-thumbnail>

    <ion-input slot="start" placeholder="Start Typing" autocorrect="on" autofocus=true inputmode="text" type="text" spellcheck=true></ion-input>

    <ion-thumbnail slot="start">

      <img src="/assets/media/bottom-interaction-add.png">

    </ion-thumbnail>

    <ion-thumbnail slot="start">

      <img src="/assets/media/bottom-interaction-speak.png">

    </ion-thumbnail>

    <ion-thumbnail slot="start">

      <img src="/assets/media/bottom-interaction-like.png">

    </ion-thumbnail>

  </ion-item>

</ion-toolbar>

And its css:

.bottom-toolbar-interaction {

  --background: #fff;

  height: 30px;

  width: 100%;

}

.bottom-toolbar-interaction img {

  width: 35%;

  height: 35%;

}

ion-input {

  --background: #000;

  width: 45px;

}

What am I missing?

2

Hi,

Try to use a grid with cols:

  <ion-toolbar>
    <ion-grid>
      <ion-row>
        <ion-col size="2">
          <ion-icon name="happy" size="large" color="primary"></ion-icon>
        </ion-col>
        <ion-col size="1">
          <ion-icon name="happy" size="large" color="primary"></ion-icon>
        </ion-col>
        <ion-col size="5">
          <ion-input></ion-input>
        </ion-col>
        <ion-col size="1">
          <ion-icon name="add" size="large" color="primary"></ion-icon>
        </ion-col>
        <ion-col size="1">
          <ion-icon name="mic" size="large" color="primary"></ion-icon>
        </ion-col>
        <ion-col size="1">
          <ion-icon name="thumbs-up" size="large" color="primary"></ion-icon>
        </ion-col>
      </ion-row>
    </ion-grid>
    
  </ion-toolbar>

tryit

3

Many thanks, germantamayo!

1 Like