rstudio / flexdashboard

Easy interactive dashboards for R
https://pkgs.rstudio.com/flexdashboard/
Other
813 stars 300 forks source link

Unable to scroll in input sidebar on mobile device #380

Open adam-mdmph opened 2 years ago

adam-mdmph commented 2 years ago

Fantastic package. Thank you so much for developing this. Makes deploying dashboards super easy.

I have developed a risk calculator for vascular surgery and deployed a demo here: www.vascalc.org. However, when opened on a mobile device or narrow the window, I am unable to scroll in the input sidebar. I can't find a fix in your documentation.

Thanks again for a great package!

RobWiederstein commented 2 years ago

For what it's worth, I opened your app on safari in the "Enter Responsive Design Mode" and on the Iphone 8 view, it seemed to be working . . .

Interesting stuff too!

al-obrien commented 2 years ago

I was able to repeat this issue @adam-mdmph reported on the latest version by having many options to select as part of the UI. Adding dateRangeInput() as one of the UI elements seemed to be the easiest way to recreate the issue.

adam-mdmph commented 2 years ago

Thank you for making such a great package and reviewing my issue. I found that when I inserted a link at the bottom of the column, I was able to scroll to the bottom, but without the link, it cuts off after 8 items or so. Probably just a sign I should trim down my inputs... but thought I would pass along that I was having this issue.

adam-mdmph commented 2 years ago

I revised my project to recreate the issue. You may see it if you open this page for the carotid risk scores. https://adam-johnson.shinyapps.io/vascalc-flexdashboard/#section-carotid

al-obrien commented 2 years ago

Not sure what other browsers were tested, but I found it was easiest to notice the issue when in Chrome (using the link in the prior post). Firefox doesn't flip to the more compact format as readily from what I can see...

gadenbuie commented 1 year ago

I think I see the issue in the latest link. The sidebar inputs overflow the parent container but you can't scroll:

Image

Here's a solution you can use in your dashboards if you run into a similar problem. Add this CSS to your dashboard, either in a css chunk or in a separate .css file that you pass to the css parameter of flex_dashboard.

.mobile-layout .chart-wrapper .chart-stage {
  overflow-y: auto;
}

That might not be perfect and you may need to include an ID in the CSS selector, e.g. .mobile-layout #section-patient-details-1.chart-wrapper .chart-stage.

For my own notes: something about having only shiny inputs is causing flexdashboard to decide that the contents of the sidebar should flex

https://github.com/rstudio/flexdashboard/blob/23e41c0445477417f6d12b29e5f11d807d0baf9b/inst/www/flex_dashboard/flexdashboard.js#L910

al-obrien commented 1 year ago

This worked okay in my first attempt, but in order to prevent some clipping at the very bottom I had to....

  1. Apply the overflow-y:auto to the chart-shim class
  2. Adjust the .chart-shim bottom position or bottom margin to 20 px

image