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

    Q-Dialog: Set custom size (width, height)?

    Help
    2
    5
    7828
    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.
    • 9
      9223000 last edited by

      Hello!

      Tell me please.
      How can a Q-Dialog set a fixed size (width and height). If you use <Q-Dialog style = “height: 300px; width: 800px”>, then you cannot set the desired width, it is limited by default, like 600px, but you need to install more, say, 1000px.
      Moreover, if q-image is placed in the Q-Dialog, it expands itself.

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by metalsadman

        @9223000 use it inside the content of your q-dialog https://codepen.io/metalsadman/pen/yWKQEo, styled the width and height of the q-card inside it.

        1 Reply Last reply Reply Quote 0
        • 9
          9223000 last edited by

          The problem is that style = “width: 1000px” does not work, it is such an impression that the Q-Dialog is limited to the width of 600 px by default

          metalsadman 1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman @9223000 last edited by metalsadman

            @9223000 set both width and max-width like so style="width:1000px;max-width="1500". updated the pen https://codepen.io/metalsadman/pen/yWKQEo. p.s. browser inspect can help you with this.

            1 Reply Last reply Reply Quote 1
            • 9
              9223000 last edited by

              Very cool! Thanks! 🙂

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