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 to show QDate within the QInput using QPopupProxy when width of QInput is larger than QDate

    Framework
    3
    5
    588
    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.
    • dmitry.polushkin
      dmitry.polushkin last edited by

      How to show QDate within the QInput using QPopupProxy in case if QInput has width more than QDate?

      Please see an example:

      https://codepen.io/dmitry-polushkin/pen/GRoOQMV

      Is there are any way to control with of the q-popup-proxy?
      Maybe you can suggest some other solutions?

      S 1 Reply Last reply Reply Quote 0
      • S
        Stanley @dmitry.polushkin last edited by

        @dmitry-polushkin Please see the demo.
        https://codepen.io/Stanley-549393092/pen/LYGeZMV

        1 Reply Last reply Reply Quote 0
        • dmitry.polushkin
          dmitry.polushkin last edited by dmitry.polushkin

          @Stanley doesn’t work as expected.

          I need to open dialog box when I click on the input, not on the icon.
          It opens in a dialog box only when the height is too small, when it’s desktop it opens as dropdown with element full width:

          QDate_With_QInput_Quasar_Playground.png

          No way to change the width of the calendar container.

          metalsadman 1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman @dmitry.polushkin last edited by metalsadman

            @dmitry-polushkin there’s a warning above this link
            https://quasar.dev/vue-components/popup-proxy#QPopupProxy-API
            , also take a look into breakpoint prop, as it sets what mode it will take based on the screen width.

            Example:
            https://codepen.io/metalsadman/pen/KKVZgRj

            1 Reply Last reply Reply Quote 1
            • dmitry.polushkin
              dmitry.polushkin last edited by

              @metalsadman thank you so much! Works perfect 🙂

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