Vuetify: [Feature request] Dialog width/max-width enhancements
I suggest the following tweaks to the dialog component:
1) Make max-width default to 'none' (i.e. remove it) instead of 290px
2) Set default width to 'auto'
What will it allow you to do that you can't do today?
Currently, if you don't specify the max-width prop the dialog will span the entire screen (100% width). Imho it would be more appropriate to leave the default width at 'auto' so it fits the content and not set a max-width explicitly.
If the user wants a full width dialog, they should use the full-width prop which should append a class dialog--full-width to the dialog element. Currently, this prop is not working as intended I believe as it targets the wrong element (see). (this might justify a separate bug report)
How will it make current work-arounds straightforward?
It is cumbersome to create dialogs that stretches to its content with the current model. max-width has to be set to 'none' and you need to use a custom class to override the width on the dialog.
What potential bugs and edge cases does it help to avoid?
I believe most users expect the dialog to fit the content and not stretch 100% by default. This fix will make usage of the dialog component more straightforward.
What do you think?
sindrepm
All 6 comments
The dialog--full-width has to do with the activator slot being inline or a block (full-width) and not to do with the actual dialog.
johnleider
on 15 Oct 2017
@johnleider To clarify: max-width: none, width: auto is the CSS spec defaults anyway so I think it is better to just omit these inline styles when they are not needed. I am against specifying inline styles unless absolutely necessary as it makes it more difficult to override the styling in a custom CSS class due to inline styles having priority.
sindrepm
on 15 Oct 2017
jacekkarczmarczyk
on 15 Oct 2017
Is it possible to make a dialog with size fitting its content?
A VDialog spans 100% width even if width and max-width are omitted as this snippet.
michitaro
on 21 Nov 2018
.v-dialog {
width: unset;
}
goodies4uall
on 25 Mar 2019
@goodies4uall Thanks! That is what I wanted.
https://codepen.io/anon/pen/ywwEZo
michitaro
on 25 Mar 2019
Related issues
Webifi
路
3Comments
radicaled
路
3Comments
itanka9
路
3Comments
jofftiquez
路
3Comments
ricardovanlaarhoven
路
3Comments
Most helpful comment
.v-dialog {
width: unset;
}