In my panel I have a div element with the css property:
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
This element has some content that needs to be scrolled. On a desktop, it’s work OK, but on touch devices it’s doesn’t work. I can not understand why scrolling does not work on mobile devices? I suspect that this is somewhere in the properties of the grafana css but I can’t find it.
By the way, Grafana 4.6 works perfectly on all devices.
Not sure. As a test, I created a new dashboard with one panel - Text panel. And added this as the content (with Mode HTML):
<div style="overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; height: 500px;">Stuff</div>
And scrolling worked both on desktop and mobile (iPhone).
Very strange. But it does not work for me for my “galaxy note s8”. Even if I select a device in the developer tools, it still does not work. Here is an exampled code that I run: git hub
And here is showing video the result of the work: on Grafana 4 and on Grafana 5
It should be noted that when I switch the mode I update the page.
Thanks for taking the time to create the scroll test (and the videos) - will test this out and see if I can find the reason.
Hmm, not seeing the same thing you are seeing. Cannot reproduce this in the Chrome dev tools. It is not working on my iPhone but it is different from your repro - the scroll bar is not visible at all.
It is something to do with the max-height css property combined with the actual height of the panel.
So to make this easier to repro than having a plugin, using the text panel again:
<div style="position: relative; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; max-height: 300px;">
Scroll DIV
<div style="height: 50px; background-color: gray">Row</div>
<div style="height: 50px; background-color: lightgrey">Row</div>
<div style="height: 50px; background-color: gray">Row</div>
<div style="height: 50px; background-color: lightgrey">Row</div>
<div style="height: 50px; background-color: gray">Row</div>
<div style="height: 50px; background-color: lightgrey">Row</div>
<div style="height: 50px; background-color: gray">Row</div>
<div style="height: 50px; background-color: lightgrey">Row</div>
<div style="height: 50px; background-color: gray">Row</div>
<div style="height: 50px; background-color: lightgrey">Row</div>
</div>
If the height of the panel is greater than 300px then scrolling will not work on mobile. Scrolling does work if you either increase the max-height property or make the panel smaller or just remove the max-height property.
Would just removing the max-height property work in your case? The panel will scroll automatically if the content overflows the panel.
There is a potential bug though if you need a scrolling div within a panel and the div’s max-height is less than the panel height. This div scrolls on desktop but not on mobile:
Thanks for your answer.
I understand it because of the new UI engine?
The parameter max-height (or “heigth”) is needed to enable overflows and scrolling. Without it, I can not make the div scrollable. From documentation:
In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap. (docs)
Yes, but do you need to make the div scrollable? The panel has a height and the overflow property set so it will add a scroll bar if the content overflows.
The panel? Maybe you mean the dashboard? Because in grafana 5 it doesn’t work.
I need scrolling inside the panel (my plugin) like this
Sorry about the delay (sick kids etc) but here is a panel that scrolls on my iPhone at least:
http://play.grafana.org/d/JGi4Bmekz/scrolltest?panelId=4&orgId=1&tab=general
Does this work for you or not?
Yes, it works for me 
. Can I see the source code?
Yes, just go into edit mode:
http://play.grafana.org/d/JGi4Bmekz/scrolltest?panelId=4&fullscreen&edit&orgId=1
It’s your html without the css that you had on the parent div.
I’m now completely confused 
Actually, it only works in a text plugin. My code is still dosen’t work. I looked at the source code of the text plugin and did not find anything that could help me.
I tried to use “ng-bind-html” but it didn’t help me.
Also I noticed such a feature that when I scroll in a text plugin, a class ps--scrolling-y is added to the parent tag:
<div class="panel-content ps ps--active-y ps--scrolling-y"
With my plugin, I do not notice this and I have only:
<div class="panel-content"
I’ll test it in the plugin as well - but I’m at GrafanaCon EU today and tomorrow so it will probably be a few days before I have time.
Ok 
Thank you. Right now I watch the event on YouTube
I spent some time looking at the embedded div in a panel: http://play.grafana.org/d/JGi4Bmekz/scrolltest?panelId=5&fullscreen&edit&orgId=1
And it is definitely due to the new perfect-scrollbar component. I think I might disable it for mobile/small screens so that they just use native scrolling - that will take a day or two to figure out.
Thank you for your time. It would be great.
Hi guys
Im trying to prevent the scrolling…
Can anyone assist? im only 1 day old to this product 
<div class="widget">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#processor"></use></svg></div>
<div class="name">CPU Load (1min)</div>
<div class="valueGroup"><div class="value">{{itemValue('OpenHAB_Cpu_Load1') | number:1}}%</div></div>
<div class="graph"></div>
<iframe src="http://192.168.0.3:3001/d-solo/7uU68LHiz/system-info-graphs?panelId=2&orgId=1&tab=display" width="250" height="200" frameborder="0"></iframe>
<div class="legend">Last 7 days</div>
</div>
</div>