Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS Update for q-input Auto-Growing Textarea: Dynamic line-height #16772

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from

Conversation

arthurbolsoni
Copy link

@arthurbolsoni arthurbolsoni commented Jan 14, 2024

What kind of change does this PR introduce?

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

Does this PR introduce a breaking change?

  • 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:

  • 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;
}

… Adjustment

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.
@rstoenescu
Copy link
Member

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 rstoenescu self-requested a review January 30, 2024 12:49
@arthurbolsoni
Copy link
Author

Really looks better with 1.286.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants