How i can make dialog or modal movable and resizable?

Daniel Tarita

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?

chbarr

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>

Daniel Tarita

@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>?

chbarr

@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 div

So 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>

Daniel Tarita

@chbarr Thank you, I will try it.