AppGyver steroids app - How to add scrolling to a Drawer - angularjs

I implemented a drawer in my steroids application with similar styles as google+ drawer. However, I have several links on it, and when my device is in landscape mode I'm unable to see all the links, and I can't scroll the drawer.
I want to be able to scroll the drawer vertically as a normal webview, just like google+ drawer does.
Is that possible?
Can I embed a webview inside another?

I managed to fix this by adding heigh=device-height to the content meta tag. And I added overflow-x=hidden to just allow vertical scrolling.

Related

How to collapse React Bootstrap mobile Navbar when tapping anywhere?

I would like to collapse the mobile react bootstrap navbar when tapping anywhere on the screen. I know collapseOnSelect exists to make the mobile navbar collapse when an item is selected, but I'd also like to achieve the same thing when the user taps anywhere on the screen. Not sure if its possible, I can't find anything in the documentation.
Thanks!

Material UI Drawer scrolls background page to top when opening

I am using material-ui as the UI package for an app.
In the app I'm using material-table with a custom infinite scroll.
When a row is clicked, a drawer opens from the right of the webpage.
Once the drawer opens, the background of the drawer (the infinite scroll table and general page) automatically scrolls back to the top of the page.
This makes this page very unfriendly to users.
I've tried the solutions that are mentioned here, but it doesn't seem to work.
I tried to use it like this:
<Drawer ModalProps={{disableRestoreFocus: true}} disableRestoreFocus>{content}</Drawer>
I couldn't find anymore information on material-ui github, or here on stack overflow.
Has anyone encountered this issue or know any other options I can try?
Thanks in advance.
For material-ui v4, you can add this attribute on the drawer component:
disableScrollLock={true}

How to enable scrolling in CanvasJS charts on mobile?

I am using the ReactJS version of the CanvasJS library.
I have some charts laid out on the screen such that they take up close to 100% height and width on a mobile device.
When I place my fingers on the chart and drag (in order to scroll down the page), I am unable to scroll. This issue doesn't happen on other parts of the page where I don't have the chart.
Is there any way to get scrolling working properly when touching these charts on mobile?
Figured it out.
I had the CanvasJS component wrapped inside a div component.
This div component had the following CSS attributes applied to it:
overflow-y:auto;
overflow:scroll;
overflow-x:auto;
Once I removed those CSS attributes (which didn't need to be there in the first place) I was able to touch-drag on the chart component on mobile.

how to use Parent-child transitions with Material-ui on desktop

I have a list in a drawer that is docked to the browser screen (desktop) and I want to expand the content of the list item to fill the entire drawer when I click on it just like explained in this demo:
I could find ways of doing it using Android but not using react material-ui V1.0.
Has anyone already done something like it?

KIK: How do I programatically open the sidebar?

Is there a way for me to open the sidebar using one of the buttons on my HTML5 app? I know KIK displays that "3 vertical dots" button/slider on the left for users to open the sidebar, but can I still trigger that using JavaScript?
There are no APIs to open the sidebar. Only the user can do so

Resources