[Solved] q-drawer completely blank with iOS theme
I’m currently having a problem where a drawer is rendering blank when using the
mattheme 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
iOStheme 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.stylbut then are (pretty much) the same. Next step is to delete things until it works … hoping an idea here can short-circuit that approach!
For the record I’ve tried a couple of different things:
quasar initnew 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)
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:
- clone https://github.com/krsyoung/ttt
- cd ttt
- npm install
- quasar dev ios
- 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:
The drawer seems to work as expected for the iOS theme!
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
matbut 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.