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

    [Solved] Change height of top toolbar when running PWA (standalone)?

    Framework
    1
    2
    954
    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.
    • ssuess
      ssuess last edited by Shone

      Hi, I have figured out that if I add viewport-fit=cover to the meta viewport line in the index.html file, my PWA will move up the entire site behind the statusbar on iOS and will therefore give it the color I want. However, I now need to drop the toolbar down or increase its height to compensate as it is too close to the statusbar text. I find I can do platform detection with this js in my index.html file

      // Detects if device is on iOS 
      const isIos = () => {
        const userAgent = window.navigator.userAgent.toLowerCase();
        return /iphone|ipad|ipod/.test( userAgent );
      }
      // Detects if device is in standalone mode
      const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);
      
      // Checks if should change height of header:
      if (isIos() && isInStandaloneMode()) {
          this.body.style.paddingTop = '50px'; /* this does not work */
          document.getElementById('header').style.height = '70px'; /* this neither */
      }
      

      but I can’t seem to set the header height from here. I am sure there is probably some better way to deal with this, anyone have any advice?

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

        Well in case this helps someone else:

        in my default.vue file I added the following in the template:

        <q-toolbar v-bind:style="{ height: toolbarheight + 'px', 'padding-top': ptop + 'px', 'padding-bottom': pbottom + 'px' }"
                color="vote"
              >
        

        I then added data items for all three (toolbarheight, ptop, and pbottom) and set them to initial values.

        I then added this code to mounted and methods:

        mounted: function () {
            this.$nextTick(this.checkPWA())
          },
          methods: {
            checkPWA () {
              // Detects if device is on iOS
              const isIos = () => {
                const userAgent = window.navigator.userAgent.toLowerCase()
                return /iphone|ipad|ipod/.test(userAgent)
              }
              // Detects if device is in standalone mode
              const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone)
        
              // Checks if should change height of header:
              if (isIos() && isInStandaloneMode()) {
                this.toolbarheight = '70'
                this.ptop = 15
                this.pbottom = 0
              }
            }
          }
        

        and voila! it checks if PWA is in standalone mode on iOS and changes the height of the header.

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