[Solved] q-drawer completely blank with iOS theme

  • I’m currently having a problem where a drawer is rendering blank when using the iOS theme (mat theme works perfectly!). I can see the drawer slide from the left, however the contents are not visible (but I can see the DOM elements are there and in the right place).

    Anybody have any ideas what I might have done that would be breaking the iOS theme for the drawer? I tried the quasar-play app and it worked, I then copied and pasted the same drawer code into my app and it doesn’t work.

    I tried a diff of the app.ios.styl but then are (pretty much) the same. Next step is to delete things until it works … hoping an idea here can short-circuit that approach!


    0_1493513488760_Screen Shot 2017-04-29 at 8.50.52 PM.png

    For the record I’ve tried a couple of different things:

    • quasar init new project (drawer works)
    • create a new view within my project with a direct copy & paste from quasar-play (drawer doesn’t work)
    • try to remove a bunch of imports in my main.js (guessing, drawer doesn’t work)
    • tested with Safari and Chrome
    • displays when using a larger resolution (i.e. iPad Pro)

  • Admin

    Any repo I can take a look at? It’s probably a misusage somewhere. Thanks!

  • Hey, thanks @rstoenescu! I tried to create a repo that replicated the issue (by deleting a bunch of stuff from the project) but then the drawer worked :|

    Very confusing! Working through deleting things piece by piece again to try and figure out what is conflicting. Will report back.

  • Ok, I think I have a repo that reproduces the issue. My steps are:

    1. clone https://github.com/krsyoung/ttt
    2. cd ttt
    3. npm install
    4. quasar dev ios
    5. click on hamburger, see blank drawer!

  • Ok I think I found out why! The problem seems to be in my App.vue. If I change from:

    <router-view class="layout-view"></router-view>



    The drawer seems to work as expected for the iOS theme!

  • Admin

    I don’t see any pages being used with that Layout. You need pages too.

  • Hey, sorry, I overly simplified the example. What is weird (well more like what I don’t understand) is how the App.vue “broke” the actual layouts that I am using. The referenced repo behaves as expected (minus any page content) for mat but draws a blank for iOS. All good now, but might help somebody else who gets themselves into this situation.

  • I had the same issue on mat theme. I could also see the drawer slide from the left, but the contents were not visible (but I could also see that the DOM elements were there and in the right place).
    But it was my fault. I put the <q-drawer> inside of the “header”-slot of <q-layout> inside the toolbar class. So the color has been overwritten by these classes. The solution was to put the <q-drawer> tag outside the “header”-slot and everything works perfectly.

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.