Unable to scroll in input sidebar on mobile device

[adam-mdmph]

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]

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]

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]

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]

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]

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]

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

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

flexdashboard/inst/www/flex_dashboard/flexdashboard.js

Line 910 in 23e41c0

result.flex = forceFlex || componentsFlex(components);

[al-obrien]

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