No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How i can make dialog or modal movable and resizable?

    Framework
    2
    5
    1875
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      Daniel Tarita last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • C
        chbarr last edited by

        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>
        
        D 1 Reply Last reply Reply Quote 0
        • D
          Daniel Tarita @chbarr last edited by

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

          C 1 Reply Last reply Reply Quote 0
          • C
            chbarr @Daniel Tarita last edited by 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>
            
            D 1 Reply Last reply Reply Quote 0
            • D
              Daniel Tarita @chbarr last edited by

              @chbarr Thank you, I will try it.

              1 Reply Last reply Reply Quote 0
              • First post
                Last post