[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!

    Thanks

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

    Update
    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>
    

    to

    <router-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.