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
Related
I have a vertical swiper where in one of the slides I have a box with overflowing Y content, I want the user to be able to scroll vertically within the box. But in both dektop and android mousescroll is not working. No scroll event is generating from within the box, and scroll is interpreted as swiping. I also have a multiline text field inside same slide but I am able to scroll in that, so it must be possible. How can I make it work the way I want to?
In a Codenameone app, I'm trying to develop a carousel with a thumbnail list at the bottom. I've used Tabs control to display files (of diff types like images, video, text, button etc) in carousel style in the center of a form and another Tabs control to display thumbanail images (of the first carousel files) at the bottom of the form. When a user selects a thumbnail image in the bottom carousel, corresponding component should be displayed in the first carousel.
hi.add(BorderLayout.CENTER, mainCarousel);
hi.add(BorderLayout.SOUTH, bottom_tab);
bottom_tab.addSelectionListener((i1, i2) -> {
// bottom_tab.getTabComponentAt(i2).addPointerPressedListener((i) -> {
mainCarousel.getTabComponentAt(i2).setVisible(true);
mainCarousel.getTabComponentAt(i2).repaint();
// });
});
But the component not getting displayed in the central carousel.
Also, I tried to capture the event addPointerPressedListener, but it's not getting fired when I select a thumbnail image.
You can't set tab components to visible/invisible to show/hide them. That won't work. I'm guessing that what you want is a horizontal list for the bottom UI similar to the answer here.
I would suggest using pointer released always. Notice that this will only get delivered to focusable components or the form. To make sure you get the event you can register a pointer release listener on the form.
I encountered this specific issue with Material's md-dialog:
I click on any of the text boxes on the web page, which brings up
the mobile keyboard, this is on IPad 9.3.2.
after typing, I then either minimise the keyboard or leave it on
and click a button which shows a md-dialog as modal.
the modal shows up, which grays out and blocks the whole page.
but the dialog box appears outside of the screen, i.e. you cant see
it, you cant touch it, you cant close it.
now if I til the screen to change the orientation from horizontal to vertical or vise-versa, the screen resizes and the dialog is shown properly.
so as soon as i use the keyboard the immediate dialog show will be located incorrectly.
I am wondering if any one had this problem before, and if you know how to solve this issue?
Thanks a lot
I had a similar issue and resolved it by wrapping it in a timeout:
var confirm = $mdDialog.confirm()
.title('Test')
.content('This is test content')
.ariaLabel('Test')
.ok('Got it!')
.cancel('Cancel');
$timeout(
$mdDialog.show(confirm).then(function () {
// Do Something
})
, 0);
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.
I'm working on a mapping app using ionic and leaflet. Note that I am not using the leaflet angular directive, I am using straight JS for the leaflet map (I know, I know...).
The initial state in my app loads the leaflet map just fine. If I switch to another state and back to the map everything is also fine. However, if I launch the app, switch to a different state and open a modal window in that state, then return to the original state, the map is broken and displays a number of grey tiles. The map will not update until the browser window resizes or the orientation of the mobile device is changed.
Here's a demo on Plunker: http://plnkr.co/edit/w67K2b?p=preview. To reproduce:
Click the button at the right side of the navbar which will take you to a different state.
Click the 'Back to map' button to go back to the original state. The map looks just fine.
Click the button in the navbar again.
Click the 'Open modal' button and then close the modal.
Click the 'Back to map' button and you will see that the map is now broken.
I've seen other people report issues with grey tiles, which typically can be resolved with a call to:
map.invalidateSize()
Unfortunately this does not resolve my issue. I'm pretty much a newb, but I think the problem is that when the modal opens, the invalidateSize() method in the leaflet source code is run, since the map div is not visible, the 'size' gets set to x:0, y:0 which ends up breaking the map when I transition back to the original state.
I'm not really sure where to go from here. Perhaps I can use JS to dynamically resize the div and trick leaflet into thinking a resize event has occurred? How would I do this? Any other thoughts?
Thanks!