[Solved] q-drawer completely blank with iOS theme

[krsyoung]

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

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)

[rstoenescu]

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

[krsyoung]

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.

[krsyoung]

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!

[krsyoung]

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!

[rstoenescu]

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

[krsyoung]

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.

[tonyskulk]

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.