bug: input inside of item gets truncated with long label on smaller viewports

[infacto]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [X] v5.x
• [ ] v6.x

Current Behavior

The ion-label displaces the ion-input value. Text wrap makes no difference and does not matter.

Expected Behavior

The ion-input (value) must be dominant. Both elements should always be displayed.

Steps to Reproduce

<ion-item>
  <ion-label>This is my number input label</ion-label>
  <ion-input type="number" class="ion-text-right" value="42"></ion-input>
</ion-item>

<ion-item>
  <ion-label class="ion-text-wrap">This is my number input label</ion-label>
  <ion-input type="number" class="ion-text-right" value="42"></ion-input>
</ion-item>

See CodePen.

Ionic Info

No Ionic workspace. Therefore no ionic info CLI possible. It's Angular 12.2.14 with Ionic 5.9.2.

Additional Information

I selected Ionic 5 but I'm using the latest Ionic version in CodePen.

[DwieDima]

try this

<ion-item>
  <ion-label class="ion-text-wrap">This is my number input label</ion-label>
  <ion-input slot="end" type="number" class="ion-text-right" value="42"></ion-input>
</ion-item>

[liamdebeasi]

Thanks for the issue. Can you provide some information surrounding the desire to have ion-item elements be that small? Our components are designed for mobile + tablet device screens with ion-item intended to take up the entire width of the screen. This particular behavior only happens around ~280px in width, which is smaller than many device screens that we support.

[infacto]

@DwieDima Thanks, I forgot. Slot "end" prevents the value from being hidden. But take a look to the demo. The label and end slots are both flex and share space 50/50%. Which results in unused / weird space. Label cut off or wrapped for no reason apparent to the user. I already tried some css hacks. But found nothing satisfying. Maybe because native input can't have inline width. I just wonder, why it works without setting slot. Maybe I have to invest more time. Or I redesign the inputs. e.g. using appearance with floating labels. Or change flex ratio. Anyway, slot end is not the solution. The issue here can still occur.

@liamdebeasi I also test screens down to a minimum of 320 pixels. This is just to demonstrate the issue and to record a small gif. In my app it happens on bigger screen sizes around mobile 320-375px. See the updated demo. Using icons and a word or two more increases issue. Using slot end adds weird spaces due to flex, ... The value should be dominant. This the most important element in an input item. But the label should also use the full remaining space and can optionally wrap.

[JulienLecoq]

@infacto I have the same issue than you with the label that doesn't take the full remaining space. I had to write my own component to "correct" this issue :/

[JuliaMikov]

@infacto @JulienLecoq Had the same issue today. That in the global style helped:

.label-text.sc-ion-input-md, .sc-ion-input-md-s>[slot=label] {
  overflow: visible;
}