Long label have issues when icon exist in the input

oblique-bit / oblique

An Angular front-end framework Tailored for your swiss branded business web application, Oblique provides a standardized corporate design look and feel as well as a collection of ready-to-use Angular components. Oblique, through its fully customizable master layout, takes care of the application's structure, letting you focus on the content.

https://oblique.bit.admin.ch

MIT License

55 stars 13 forks source link

Long label have issues when icon exist in the input #128

Open ice-blaze opened 3 months ago

ice-blaze commented 3 months ago

Oblique version

11.2.1

Browser & version

Chrome

Node version

Device and operating system

osx

Is this a regression?

Yes

Screenshots

Description

When the label is very long (or the input very short) and that this input has an icon within, then the text overflow.

Reproduction

Make the mat-label longer than the input width.

Expected behaviour

The text should not overlfow. In the screenshot we can see the first input to have a correction behaviour.

Context

No response

Proposed solution

No response

nina-egger commented 3 months ago

This might be caused by this angular bug https://github.com/angular/components/issues/26428 Right now there seems to be an issue regarding input fields with icons/suffixes etc. so I'm pretty sure this bug is caused by it.

ice-blaze commented 3 months ago

Certainly related but there is something that Oblique still seems to do that material doesn't, the ellipsis. https://stackblitz.com/edit/ili1qp?file=src%2Fexample%2Fform-field-appearance-example.html Material seems not to handle it

@nina-egger Just let me know if Oblique decides in the near future to fix it or not. Because the issue seems open for a long time now and I don't see it any time soon to be fixed on angular side :/

nina-egger commented 3 months ago

@ice-blaze we have a workaround for our code examples on the documentation that will be released with 11.2.2 but not a fix itself. If we manage the release this friday you can see the autocomplete ts file for the workaround. https://oblique.bit.admin.ch/components/autocomplete/examples

nina-egger commented 3 months ago

Note: Jira issue is OUI-3080

nina-egger commented 3 months ago

Issue for the clipped label OUI-3156