ion-footer with input tag and two icons

Question

I have a styling problem with ionic. I try to make an input box similar to WhatsApp. The problem is to get two icons as buttons in ion-input to the right side. Now, both are on the same spot and overlapped. This is my current code:

  <ion-footer>
    <ion-item lines="none">
      <ion-input placeholder="Nachricht" class="message-eingabe" autoGrow="true" rows="1" maxlength="150"
        [(ngModel)]="msg">
        <ion-button class="buttonright" fill="clear">
          <ion-icon slot="end" class="rand" name="attach-outline"></ion-icon>
        </ion-button>
        <ion-button class="buttonright" fill="clear">
          <ion-icon slot="end" class="rand" name="camera"></ion-icon>
        </ion-button>
      </ion-input>
      <ion-icon name="send">
      </ion-icon>
    </ion-item>
  </ion-footer>

and CSS:

.buttonright {position: absolute; top: 0; right: 0;}

I like that ion-input starts on the left side, include both icons as buttons for attachment and camera. In addition the written text goes under the icons. Thats another problem. After ion-input there should be the "send"-button on the right side but not in ion-input. Hope someone can help..

Answer 1

Try this Code:

<ion-footer>
  <ion-toolbar>
    <ion-item lines="none">
      <ion-input type="text" placeholder="Message" autocomplete="on" autocorrect="on"></ion-input>
      <ion-button fill="clear" slot="end">
        <ion-icon icononly name="attach-outline"></ion-icon>
      </ion-button>
      <ion-button fill="clear" slot="end">
        <ion-icon icononly name="send-outline"></ion-icon>
      </ion-button>
    </ion-item>
  </ion-toolbar>
</ion-footer>