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

[Bug Report][3.6.12] v-textarea or v-input alignment issue #20154

Closed
XStarlink opened this issue Jul 12, 2024 · 2 comments
Closed

[Bug Report][3.6.12] v-textarea or v-input alignment issue #20154

XStarlink opened this issue Jul 12, 2024 · 2 comments

Comments

@XStarlink
Copy link

Environment

Vuetify Version: 3.6.12
Last working version: 3.6.11
Vue Version: 3.4.31
Browsers: Chrome 126.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

Switch from v3.6.11 to v3.6.12 in the Playground to see the alignement issue

Expected Behavior

Everything should be aligned with no extra padding

Actual Behavior

  • An extra padding is added on top of prepend-inner and append-inner slots, and an extra padding is added below the input
  • Layout is broken

Reproduction Link

https://play.vuetifyjs.com/#...

Capture d’écran 2024-07-12 à 16 04 06
@yuwu9145 yuwu9145 self-assigned this Jul 12, 2024
@yuwu9145 yuwu9145 added T: bug Functionality that does not work as intended/expected T: regression Something that used to work but we broke C: VTextarea and removed S: triage labels Jul 12, 2024
@mschoeffmann
Copy link

+1 ... can confirm this

@yuwu9145
Copy link
Member

yuwu9145 commented Jul 12, 2024

Before 3.6.12, inner icons were automatically centre aligned when there is only one row, and naturally aligned to top when more than one row. I don't think it's necessary as inner icons should always stay at the same place regardless of row changes. And it could introduce unknown pitfalls in various untested scenarios. So I deliberately removed center-affix in textarea.

For example, the provided reproduction link has issue of cross icon repositioned when typing into the second lines. It isn't the right direction to go. We want simple and robust UI.

textarea-prepend-icon

v3.6.12 ensures it doesn't jump when go to next row, the following global default settings can be used in order to fit v-btn nicely into textarea inner slots

VTextarea {
  VBtn: {
    'height':'auto',
    'density':'compact',
  }
}

https://play.vuetifyjs.com/#eNqlU8GK2zAQ/ZXBPaiF2GFbKNRkC+2910JpetBa40QgS0IapdkN+fcdOXFiZdnDsj5Z70nzpDfz/h6qGLrlD++bXcKqrVaEgzeS8PvaAqx2tfR+/B0XnbMktcVwhkZQYS+ToVj74HZaYZg4gHbi7tfVQfz+SVa0B7FFvdmSaIVM5MRCKLRR0yMDnRu87EgsQET9hKIFJscK4nhcV1Phi/qoT7gnGVBeQYCAPUtemMvJ/O3qwSk0zGvrE5VkG9z/fNu7G3iQ+/pMfSspdqvDrTP8cCb/uBTgF8YoN9g0zY2yDFpa4m0ukWEfVcmfjWCejehdIPlgsNzSOeOyjg96kOGxJLOf2UKDhFmk70veujpgNvb2UL3ht83BLfeRG8vNNrGQNzJmD4JLVqGq92auMOsLd2aaJPjgA3q0qtZ2PjqXBj6QnVmTm7auQPOs8WpQuu6Mi2wDnEUZNRteLku55WxyX7kHz/I7rhH57JtucQWvQ3oNDoMvkjMljbkyahk5JfHmnavYBe0JIlI6BVUPnicHDjkDcIQ+uAEEh1ucbOG6kWCcfLjPez4K8SmXPRXiEtVxYZMxi+pL87W5+1z9ewaGgT9k

@yuwu9145 yuwu9145 closed this as not planned Won't fix, can't repro, duplicate, stale Jul 12, 2024
@yuwu9145 yuwu9145 removed T: bug Functionality that does not work as intended/expected T: regression Something that used to work but we broke labels Jul 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants