quasar icon indicating copy to clipboard operation
quasar copied to clipboard

CSS Update for `q-input` Auto-Growing Textarea: Dynamic `line-height`…

Open arthurbolsoni opened this issue 1 year ago • 2 comments

What kind of change does this PR introduce?

  • [x] Bugfix
  • [ ] Feature
  • [ ] Documentation
  • [ ] Code style update
  • [ ] Refactor
  • [ ] Build-related changes
  • [ ] Other, please describe:

Does this PR introduce a breaking change?

  • [x] Yes
  • [ ] No

The PR fulfills these requirements:

This commit updates the CSS of the q-input auto-growing textarea. It replaces a fixed pixel value for line-height with a relative value based on the font size. This change ensures that the line spacing remains proportional and consistent regardless of the font size set, enhancing readability and user experience. Previously, the fixed pixel value could lead to visual inconsistencies when the font size was adjusted.

The PR fulfills these requirements:

  • [x] It's submitted to the dev branch (or v[X] branch)
  • [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. fix: #xxx[,#xxx], where "xxx" is the issue number)
  • [ ] It's been tested on a Cordova (iOS, Android) app
  • [ ] It's been tested on an Electron app
  • [ ] Any necessary documentation has been added or updated in the docs or explained in the PR's description.

If adding a new feature, the PR's description includes:

  • [ ] A convincing reason for adding this feature (to avoid wasting your time, it's best to start a new feature discussion first and wait for approval before working on it)

Other information: currently to solve the line size problem I used:

<q-input class="text-h6" autogrow />

textarea.q-field__native  {
    line-height: 1 !important;
}

arthurbolsoni avatar Jan 14 '24 00:01 arthurbolsoni

Hi,

Thanks for contributing! However, with line-height of 1, we get this:

image

It should actually be 1.286 (18px / 14px), but then you are sure that you need 1.

Will get back to this in 1-2 weeks (need a lot of time to investigate thoroughly and ponder over the implications). I'm currently writing the documentation for the next major versions of q/app-vite and q/app-webpack, which are priority no. 1.

Until then, please use your workaround and will write here when I get to this PR. Thank you for your understanding.

rstoenescu avatar Jan 30 '24 12:01 rstoenescu

Really looks better with 1.286. image

arthurbolsoni avatar Jan 31 '24 01:01 arthurbolsoni