I'm trying to have an always open sidebar on desktop and screens that are large enough. and the a sidebar on mobile;
like the one shown here: http://onsen.io/pattern-sliding_menu.html
but there when you click on the main page the sidebar goes away.
any way to make it stick? I couldn't find anything for this
Onsen UI has <ons-split-view> for that. Explained in the docs: http://onsen.io/reference/ons-split-view.html
<ons-split-view
secondary-page="secondary.html"
main-page="main.html"
main-page-width="70%"
collapse="portrait">
</ons-split-view>
Related
I have implemented the material UI Drawer as per the responsive example on Material UI's website. On larger screens, how do I get the drawer to scroll with the whole page? At the moment, if the contents of the drawer become too long, a vertical scroll bar appears on the drawer itself which I o KY want to happen on smaller devices.
Here is a link to the code on Material UI's site:
https://material-ui.com/components/drawers/#responsive-drawer
I have tried overflow: hidden but obviously the contents then cut off and hide the content!
Any help would be much appreciated.
Many thanks
I guess it's because you specify height in your styles... Remove it or make it auto. It's a long shot, you should provide your css :)
I am writing a Single Web App with material ui, that needs to be responsive, but I do not know which is the control where I must allocate the mains component, if it is a grid or a box.
The next image show the main components arrangement in md,lg,xl
The next image show the main components arrangement in sm,xs when width < 960
In the web I found many complex and very difficult to understand layouts, but not find a basic example. Some like "material ui responsive for dummies".
The mobile version, will have a breakpage between the Appbar and Sidenav, both will occupy the full height, and the Map in the second page will fill the screen.
I did it for you with MU Grids and media queries, if you have questions, ask. I am always ready to help. This is codesandbox link. Let me know if it help you.
https://codesandbox.io/s/charming-shirley-oq6l5
Show my codesandbox answering your problem : https://codesandbox.io/s/amazing-sound-1nj87
It display your layout for md lg xl correctly. For xs and sm screens, sidenav & map take full height with a break page between sidenav and appBar
Thanks to both, it solved the main part o what i need.
Also need to implement a change of page.
I forget to mention that the map will be React-Leaflet,
so need to implement a flap button over the map for the mobile version.
The button is for scroll to up, because any finger movement in the map area only will affect the map content.
Do not will have effect in the scroll.
Another thing to implement is the break page concept:
The behaviour of the break page is like when you see a pdf in presentation mode and press
the keyboard button Repag - Avpag, it change all the content and never see the half top and the half down.
Grettings
I'm developing an ionic app which, on one page, uses touch to scroll down in a table. However, the default "draggableness" of the whole page interferes with what I want to achieve. How can I prevent the content from moving when dragging?
I only found answers about the sidemenu.
.
Example of draggable content: http://codepen.io/ionic/pen/VLwLOG (just try to drag up/down on white background)
Thanks in advance
Use <ion-pane> to wrap the entire page, and insert <ion-scroll> where you have content that you want to be able to scroll (such as the table). You just have to make sure to set the height of the scrollable area. If your page is wrapped in an <ion-content> element, it will be scrollable by default.
From the docs:
If you'd just like to have a center content scrolling area, use
ionContent instead.
The previous version of Onsen UI, there was a function call presentPage, so you could show a page without any characteristics of the previous page. It would clear the stack.
It was useful for examples, to be able to have just a page with a Sliding menu, but subsequent pages would not.
How can this in the latest Onsen UI (currently at v1.14)?
I tried using the resetToPage function, but that doesn't stop the Sliding menu.
Let me try to answer this one. I believe I understood the question :)
So, you have a "sliding menu" page with a main page, then a hidden menu page that could slide out when you swipe. Now you want a new page that show but doesn't have any sliding menu in it, just a regular page?
If so, you can achieve it by using ons-sliding-menu on top of an ons-nagivator
Take a look at this sample, I modified the sliding-menu code sample from onsen documentation: 'http://codepen.io/vnguyen972/pen/EjHDk'
Link to Page2 from the menu will open up a new page without any sliding menu in it.
Give + if this helps!
[1]: http://codepen.io/vnguyen972/pen/EjHDk
I've read this solution: Having trouble combining Onsen UI ons-sliding-menu and ons-tabbar
But, the question is, when I change the page on right menu, i just lost the tabmenu on boton, so, what I can do programmatic to avoid this?
If you want to give a same role to slidingMenu and tabbar, i.e. both of them switch a category,
Please see the answer Sliding menu with Tab bar in Onsen UI