Layout interference in Chrome devtools device emulation
Closed this issue · 2 comments
When using Chrome's dev tools, if I click the icon to open the device toolbar (the one that pretends you're using a phone, next to the CSS pointy tool) and select iphone 5x, re-frame-10x interferes with the layout - when hidden, it slides out of view but the rest of the layout does not update.
This might be something to do with my CSS implementation, but I'm exclusively using Bootstrap and I feel like a tool such as this shouldn't interfere with my layout. When doing a lot of responsive development I have to disable re-frame-10x in the project.clj, which is a shame because it's great (and useful for that work - moving forward and backwards between states).
Also, re-frame-10x doesn't fully slide into view when using these views.
In the image above, you can see that re-frame-10x is only showing some of the panel, because otherwise it would cover the entire page.
In this image, you can see how re-frame-10x has prevented the CSS from displaying full-width (the grey background should go all the way across).
Hey, I'm happy to take patches to improve this further, or even a reproducing case to begin with. I can't reproduce this on todomvc (I know, not the best example). Day8 mainly works on desktop apps so I don't have a mobile project setup to test this further.
Hey, it's been a while. Sorry to hear your layout got messed up. I do wonder if there's a naming conflict in the css, since 10x uses re-com, which uses bootstrap classes. We're actually hoping to overhaul re-com's css, so this may improve eventually.
Otherwise, I can't reproduce the layout bug either.
I know our mobile support isn't great, but it seems out of scope. A popout window should be the right choice for testing responsive layouts in the mobile simulator.