Flex plots broken on mobile

[Gregory Smith]

I tried to do a flex plot on my phone and the plot did not render correctly. All I got was the left side y-axis. Screen shot attached.

[Sander Roosendaal]

It used to work better and I will figure out what change caused this bug, but I am wondering how useful Flex Charts are on smaller screens.

[Gregory Smith]

@sanderroosendaal: I never use flex plots on my phone. I was sitting in an airport trying to figure something out and noticed the bug. I agree that it doesn't need to be optimized for a phone, having a rendering issue would be jarring for a user who tries it

[Sander Roosendaal]

One solution would be to put the sliders under the chart for all screen layouts. What is happening is that the bokeh module generates some CSS style rules which I am unable to overrule. Perhaps our style guru @jospape can check them and find a solution?

[Jos Pape]

<style> .bk-grid .bk-grid-column .bk-layout-fixed {display:none;} .bk-plot-layout .bk-layout-fixed {position:auto; width:100%; height:auto;} </style>

fixes this for me, bout those containers don;t have and special classes, so this could break other stuff. @Sander if you could add a class to this container it would be helpfull

[Sander Roosendaal]

@jospape Those .bk styles are in the part that I get from the bokeh server. But let me try

[Sander Roosendaal]

@jospape The only container I have control over is the one with id="theplot"

[Jos Pape]

<style> #theplot .bk-grid-column {display:none;} #theplot .bk-plot-layout {position:auto; width:100%; height:auto; display:inline;} </style>

should not break the other functionality

[Jos Pape]

there is a hashtag before theplot

[Sander Roosendaal]

That completely removes the sliders - probably OK if I implement this for screen width < 600 px. The chart is still running outside the window.

[Jos Pape]

@sanderroosendaal yes, the screen layout only allows to hide the sliders. the width:100% should fix the chart outside the window

[Jos Pape]

@sanderroosendaal add @media only screen and (max-width: 600px) { // code here } to the code

[Sander Roosendaal]

@jospape That seems to go in the right direction. Thanks!!!!

[Jos Pape]

@sanderroosendaal no problemo ;-)

[Sander Roosendaal]

testing on dev in Chrome for mobile (iPhone). It's much better now, but the chart still runs off the right side of the screen

[Jos Pape]

@sanderroosendaal die you try a width of 90%?

[Sander Roosendaal]

@jospape That doesn't seem to help

[Jos Pape]

i think the box that holds the graph is to small. aill need to look into that