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] v-data-table actions elements use too much width #5614

Closed
gileneusz opened this issue Nov 14, 2018 · 3 comments
Closed

[Bug Report] v-data-table actions elements use too much width #5614

gileneusz opened this issue Nov 14, 2018 · 3 comments
Assignees
Labels
C: VDataTable VDatatable platform specific The issue only occurs on a specific platform
Milestone

Comments

@gileneusz
Copy link

gileneusz commented Nov 14, 2018

Versions and Environment

Vuetify: 1.3.8
Vue: 2.5.17
Browsers: Chrome 70.0.3538.77
OS: Windows 7

Steps to reproduce

see codepen

Expected Behavior

actions wrapping

Actual Behavior

.v-datatable__actions__select uses too much space, and transforming actions into two row element

Reproduction Link

https://codepen.io/anon/pen/qQrgGx?editors=1010

@gileneusz gileneusz changed the title [Bug Report] v-data-table actions elements using to much space [Bug Report] v-data-table actions elements using too much width Nov 15, 2018
@gileneusz gileneusz changed the title [Bug Report] v-data-table actions elements using too much width [Bug Report] v-data-table actions elements use too much width Nov 15, 2018
@jacekkarczmarczyk
Copy link
Member

Looks good on IE/Edge, fails on Firefox/Chrome

@jacekkarczmarczyk jacekkarczmarczyk added the platform specific The issue only occurs on a specific platform label Nov 22, 2018
@Groxan
Copy link

Groxan commented Nov 28, 2018

This can be fixed by changing the input type attr (inside .v-datatable__actions__select > ... > .v-select__selections) from 'text' to 'hidden'.

@tamirvs
Copy link

tamirvs commented Jan 1, 2019

Thanks to @Groxan I was able to fix it like this:

.v-datatable__actions .v-datatable__actions__select .v-select__selections input {
  display: none
}

@MajesticPotatoe MajesticPotatoe added the C: VDataTable VDatatable label Apr 10, 2019
@johnleider johnleider added this to the v2.0.0 milestone Jun 18, 2019
johnleider added a commit that referenced this issue Jun 19, 2019
fix for #5614 in #7544 broke tab interaction of selects, including the one in the table
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VDataTable VDatatable platform specific The issue only occurs on a specific platform
Projects
None yet
Development

No branches or pull requests

8 participants