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.
Related
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
Is it possible to disable the X and Y scrolling of a GoogleMap inside a Codename One?
I'm referring to a map created using the cn1lib described here: https://www.codenameone.com/blog/new-improved-native-google-maps.html
If the map is scrollable, then I cannot insert more than one map in a Form, otherwise the contentPane scrolling and map scrolling conflict. If the maps can be not scrollable, then I can insert more maps in the same Form without scrolling issues.
I know that I can use static maps (that are images), but I need that pinch-to-zoom and pin locators action listeners work.
Thank you
To expand on Steves comment. There's no support for this in the peer component wrapping. We assume most peers are scrollable within as mixing scrolling and native peers with produce a bad experience. E.g. panning the map instead of scrolling or potential artifacts when the map and title area draw on top of each other when your page is scrolled down.
I would suggest you take a different route for this use case. Use a static image and when a user taps the map open a map in the bottom part of the screen as a dialog or as a separate form to provide the full map UX.
I'm trying to create Custom Form configuration with scrollable TitleArea. The Form (black) has a BoxLayout.Y_AXIS Layout in BorderLayout.CENTER (blue). StatusBar (green) stays in BorderLayout.NORTH (green), when rest of the TitleArea (cyan) is in the first position in BoxLayout.
removeComponentFromForm function is unavailable for using in extended class. How can I remove components from Form to removing titleArea from BorderLayout.NORTH?
Why use the title area at all? Why not just add a component to the top of the box layout Y and style it as a Title that way you can scroll it out?
You can also use the new Toolbar API that includes many abilities to fade out the title as you scroll etc. See:
http://www.codenameone.com/blog/toolbar.html
http://www.codenameone.com/blog/cats-in-toolbars.html
I'm working on a web app that uses lots of modal overlays with scrollable content in the modal . On touch devices, and in particular on Android, the mobile browser wants to scroll the body content behind the modal instead of the actual scrollable content area within the modal. Or, if the content does scroll, when it hits the top or bottom of the scrollable area, the scrolling then continues on the body. I don't want the body to scroll at all under any circumstances when the modal is visible/active.
I tried to prevent this with the following code but it seems to have no effect (in this case, $context is the document root):
$context.on('touchmove touchstart touchend', '[data-modal-content]', function(e) {
e.stopPropagation();
});
Anyone have other ideas/insight?
Is there anything wrong with the provided z-index of your elements? Maybe the Modal itself or an inner container isn't stacked on top of the body-text
I can't figure out how to remove the scroll bar from my website.
I've looked up ways of doing it on SO but with no luck. It just keeps staying in the box.
I also want to be scrollable but just without the actual scroll bar visible from computers.
(It's not visible via mobile devices which is okay)
Regards,
Alex
There is no standard cross-browser CSS code you can use to render scroll bars invisible. However, you can put your <div id="shoutbox_data"> element inside another <div> element with an id field like "shoutbox_wrapper", set the CSS overflow property of the wrapper element to hidden, and then use JavaScript to automatically resize the wrapper element so it covers up the scrollbox. The idea comes from Jan Bilek, and you can find the JavaScript to accomplish this on his blog.