Vuetify: Data table edit dialogs don't appear on empty cells

Created on 18 Sep 2017 · 5Comments · Source: vuetifyjs/vuetify

Steps to reproduce

Create a data table with a v-edit-dialog containing a text field
Click the cell
Delete all the text and dismiss the edit dialog
Try to open the edit dialog agian

Versions

Vuetify 0.15.7

What is expected ?

If a cell is empty the edit dialog activator should fill the entire thing.

What is actually happening ?

The dialog activator is only as wide as the text, so it ends up being 0px

Reproduction Link

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

bug

Source

KaelWD

Most helpful comment

I have not found more components using the small-dialog style, so I'm using this css code as a workaround
div.small-dialog { width: 100% }

MiguelMora on 13 Feb 2018

👍2

All 5 comments

Duplicate of https://github.com/vuetifyjs/vuetify/issues/1282

jacekkarczmarczyk on 18 Sep 2017

Ah thanks, I didn't see that one. I'll leave this open because I believe a sensible default is needed.

KaelWD on 18 Sep 2017

This really seems more like a bug than an "enhancement".

When the inline-editor's activator is based on the size of a text value then even non-empty but short values, like "i", makes opening the inline editor very non-material-ui friendly. It becomes an extremely small target to click or touch. Then in the case of an empty value, the activator is simply gone.

IMHO, the entire cell should activate the inline editor by default.

Webifi on 21 Sep 2017

👍2

I have not found more components using the small-dialog style, so I'm using this css code as a workaround
div.small-dialog { width: 100% }

MiguelMora on 13 Feb 2018

👍2

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord