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.

Sign up for GitHub

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

Jump to bottom

[Bug Report] v-select height not same as v-text-field when using dense mode #10877

Closed
mtermoul opened this issue Mar 18, 2020 · 8 comments · Fixed by #10892, moghwan/coroma-19#1 or moghwan/coroma-19#2 · May be fixed by SigmaITC/competencebyjava-front-end#8 or ayman-elkassas/Vuetify-todo-list#1
Closed

[Bug Report] v-select height not same as v-text-field when using dense mode #10877

mtermoul opened this issue Mar 18, 2020 · 8 comments · Fixed by #10892, moghwan/coroma-19#1 or moghwan/coroma-19#2 · May be fixed by SigmaITC/competencebyjava-front-end#8 or ayman-elkassas/Vuetify-todo-list#1
Assignees
@johnleider
Labels
C: VSelect VSelect S: has PR The issue has a pending Pull Request T: bug Functionality that does not work as intended/expected
Milestone
v2.2.x

Comments

@mtermoul
Copy link

mtermoul commented Mar 18, 2020 •
edited

Environment

Vuetify Version: 2.2.18
Last working version: 1.5.24
Vue Version: 2.6.11
Browsers: Chrome 80.0.3987.132
OS: Mac OS 10.14.6

Screen Shot 2020-03-18 at 11 31 05 AM

Steps to reproduce

Add v-text-field next to v-select and v-autocomplete using the dense mode. You will notice that the height of these controls don't lineup perfectly. This use to work fine.

Expected Behavior

When adding multiple input controls they should all have the same height.

Actual Behavior

The v-select does not have the same height as the text-field

Reproduction Link

https://codepen.io/mtermoul/pen/xxGzWRj
@ghost ghost added the S: triage label Mar 18, 2020
@ElijahKotyluk ElijahKotyluk added C: VTextField VTextField T: bug Functionality that does not work as intended/expected good first issue A quick-win fix that would be great for new contributors duplicate The issue has already been reported and removed T: bug Functionality that does not work as intended/expected good first issue A quick-win fix that would be great for new contributors C: VTextField VTextField labels Mar 18, 2020
@ElijahKotyluk
Copy link
Contributor

ElijahKotyluk commented Mar 18, 2020 •
edited

Duplicate of #10635

@ElijahKotyluk ElijahKotyluk marked this as a duplicate of #10694 Mar 18, 2020
@ElijahKotyluk ElijahKotyluk marked this as a duplicate of #10635 Mar 18, 2020
@ElijahKotyluk ElijahKotyluk marked this as not a duplicate of #10694 Mar 18, 2020
@MajesticPotatoe MajesticPotatoe added C: VTextField VTextField T: bug Functionality that does not work as intended/expected and removed S: triage labels Mar 18, 2020
@amoliski
Copy link
Contributor

The desired outcome is for the text field to be slightly less dense to match select/autocomplete, and not the other way around, correct?

@ElijahKotyluk
Copy link
Contributor

That was my initial thought, I was checking into it and it has to do with padding being altered on the text field due to a class when dense is present.
Screen Shot 2020-03-18 at 12 30 58 PM

@MajesticPotatoe
Copy link
Member

They should be the same height. Looks like text-field is coming in as 26px, where the select/combo/auto is coming in at 32px. In last version (2.2.17) the difference was less noticeable (only about 2 px off)

flaviotsales added a commit to flaviotsales/vuetify that referenced this issue Mar 20, 2020
@flaviotsales
fix(VSelect): make the VSelect height the same of VTextField
ebceced 
reduced the height of the VSelect in dense mode to match the height of the VTextField

fix vuetifyjs#10877
@flaviotsales flaviotsales mentioned this issue Mar 20, 2020
Merged
8 tasks
@MajesticPotatoe MajesticPotatoe added S: has PR The issue has a pending Pull Request and removed duplicate The issue has already been reported labels Mar 20, 2020
@johnleider johnleider self-assigned this Mar 24, 2020
@johnleider johnleider added this to the v2.2.x milestone Mar 24, 2020
@johnleider johnleider added C: VSelect VSelect and removed C: VTextField VTextField labels Mar 24, 2020
johnleider pushed a commit that referenced this issue Mar 24, 2020
fix(VSelect): normalize dense height (#10892)
1890bec 
fixes #10877

* refactor(VSelect/_variables.scss): remove duplicated variable

there was two variables named $select-small-chips-selections-min-height, of which the last was
removed

* fix(VSelect): make the VSelect height the same of VTextField

reduced the height of the VSelect in dense mode to match the height of the VTextField
@snyk-bot snyk-bot mentioned this issue Mar 29, 2020
Open
This was referenced Apr 18, 2020
Merged
Merged
Open
@vinihvc
Copy link

vinihvc commented Apr 29, 2020

But now, chips has no padding:
Padding bug

@jacekkarczmarczyk
Copy link
Member

@viniciushvc Please create a new issue and provide reproduction.Thank you!

@flaviotsales
Copy link
Contributor

Should the chips be smaller or the dense height bigger?

@vinihvc
Copy link

vinihvc commented Apr 30, 2020

chips smaller, if height bigger, can cause this issue problem again

@vinihvc vinihvc mentioned this issue Apr 30, 2020
Closed
@mhio mhio mentioned this issue Jun 9, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@johnleider johnleider

Labels
C: VSelect VSelect S: has PR The issue has a pending Pull Request T: bug Functionality that does not work as intended/expected
Projects
None yet
Milestone
v2.2.x
8 participants
@amoliski @mtermoul @johnleider @jacekkarczmarczyk @vinihvc @flaviotsales @ElijahKotyluk @MajesticPotatoe