Ion-item with input and buttons inside (Ionic 7)

now with ionic 7 I must define the “fill” inside the ion-input, because of this I can’t create an ion-item with an input and buttons inside without filling the console with alerts. Will they really remove the option of having an item with input and buttons inside in the next version?

example in Ionic 6:

<ion-item fill="outline">
  <ion-label>Code:</ion-label>
  <ion-input type="text"></ion-input>
  <ion-buttons slot="end">
    <ion-button (click)="scan()">
      <ion-icon slot="icon-only" name="scan"></ion-icon>
    </ion-button>
  </ion-buttons>
</ion-item>

In Ionic 7:

<ion-input type="text" label="Code:" fill="outline"></ion-input>

where can i add buttons here?

please, the example in Ionic 6 is something I use a lot, specially in inputs where something must be scanned.

3 Likes

I’ve had the same use case on Ionic 7 and my solution has been to create my own input.

Maybe there is another more optimal solution, but this one gives me the flexibility I need.

ionic-input-with-button

For my use case I have created a component in React, but the code would be something like this:

HTML

<div className="phone-input-container">
    <ion-button fill="clear">+34</ion-button>
    <input
        className="phone-input"
        placeholder="Phone number"
        type="tel"
    />
</div>

CSS

.phone-input-container {
   /* This bit sets up the horizontal layout */
  display:flex;
  flex-direction:row;

  /* This bit draws the box around it */
  border:1px solid grey;

  /* I've used padding so you can see the edges of the elements. */
  padding:1px;
  border: 1px solid var(--ion-color-step-300, #b3b3b3);
  border-radius: 4px;
}
.phone-input {
  min-height: 56px;
  background: transparent;
  width: 100%;
  flex-grow:2;
  border: none;
}

/* remove the input focus blue box, it will be in the wrong place. */
.phone-input:focus {
  outline: none;
}