search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.95k stars 3.52k forks source link

feat(QInput): allow dynamic error-message height #10060

Open thexeos opened 3 years ago

thexeos commented 3 years ago

Currently, when using error-message for QInput, we are limited by at most one line of text before we have to start adding margins, otherwise the error text will overlap the following elements. If we have dynamic error message which has to be displayed for different screen sizes, the task of keeping the bottom margin large enough, while avoiding an unnecessarily large blank gap becomes very difficult.

Since Vue 3 drops support for IE11, Quasar v2 can benefit from CSS fit-content property. It is supported by 97% of active browsers at the time of writing.

By using max-width: fit-content and no longer using absolute positioning with a transform, we can have the error message text be displayed on as many lines as needed without overlapping and more importantly without stretching the width of QInput itself.

Here is a demo: https://codepen.io/thexeos/pen/wvdoEpK

msedge_07GK6sx5ca

thexeos commented 3 years ago

Duplicate of #4142

thexeos commented 3 years ago

Okay, maybe not so quickly.

Also from MD spec:

Caution Long errors can wrap to multiple lines if there isn't enough space to clearly describe the error. In this case, ensure padding between text fields is sufficient to prevent multi-lined errors from bumping layout content.

image

So this would only need to apply to errors to comply with the specs.

mityaua commented 1 year ago

Widespread problem. I combine hide-bottom-space prop with q-mb-.. spacing (smth like that :class="[inputError ? 'q-mb-xs' : 'q-mb-lg']". In this case, we have the dynamic height for the error slot.