How i can make dialog or modal movable and resizable?
-
I have to display a large content in a dialog / modal. Is there a way to determine the height and width of the dialog / modal and to make it resizable and movable?
-
for the width and height, you can use the content-css property of the modal component
Example of a modal with a height of 95% of the screen height (the same for the width)<q-modal v-model="opened" :content-css="{width: '95vw', height: '95vh'}"> ...... </q-modal>
-
@chbarr said in How i can make dialog or modal movable and resizable?:
:content-css="{width: ‘95vw’, height: ‘95vh’}"
Thanks, that’s right. Do you know why the specification of Height does not work on <q-dialog>?
-
@daniel-tarita said in How i can make dialog or modal movable and resizable?:
Thanks, that’s right. Do you know why the specification of Height does not work on <q-dialog>?
there’s no content-css property for the q-dialog component.
And the q-dialog component is in fact a q-modal fullscreen with a modal-content divSo you must styling the div.modal-content
You can use the /deep/ keyword in stylus scoped style
<template> <q-dialog title="titre" message="message" v-model="opened" class="mydialog" /> <q-btn label="clickMe" @click="opened = !opened" /> </q-page> </template> <script> export default { name: 'my-component', data () { return { opened: false } } } </script> <style scoped lang="stylus"> .mydialog /deep/ .modal-content width 95vw height 95vh </style>
-
@chbarr Thank you, I will try it.