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 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 s…

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.

Here is video from mobile phone: https://youtu.be/fEKB5alYY-c

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-heig…

Thanks for your answer. [image] daniellee: 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: I understand it because of the new UI engine? [image] daniellee: W…

[image] tavi: Without it, I can not make the div scrollable. From documentation: 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.

[image] daniellee: 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?

Grafana 5: "overflow: scroll" does't work on mobile

Grafana Dashboards

tavi March 1, 2018, 10:20am 17

Ok Thank you. Right now I watch the event on YouTube

Grafana 5: Changing height of the panel in my plugin

Topic		Replies	Views
Grafana 5: Changing height of the panel in my plugin Grafana Plugin Development	4	1459	March 15, 2018
Horizontal panel scroll bar mixed with dashboard's scroll bar	1	2774	June 1, 2020
Mobile gui for mobile access with touch and scroll infrastructure Grafana Plugin Development	0	743	March 14, 2019
Make a react plugin scrollable Grafana Plugin Development	6	1119	October 19, 2020
Vertical Scroll bar is not scrolling to the bottom of the last Panel Grafana	0	663	September 4, 2020

Grafana 5: "overflow: scroll" does't work on mobile

Related topics