I am using materialize.css and jquery. When I compile the project in Cordova CLI as an iOS project and play it in my iPod touch, then tap the Menu icon, the options drop down, and when I tap on an option that is over a button on the page, the button is sometimes selected.
Desktop works right all the time, as does Android. Just iOS sometimes selects the element under the option. I am NOT accidentally selecting the button below.
The menu drop-down is built like:
< ul id=“dropdown1” class=“dropdown-content”>
… and the options are all < li>'s like:
< li>< a href="pages/features.html">Features< /a>< /li>
Is there some way to shield the tappable elements under the drop-down options? Whether for materialize.css or css drop-downs in general?
Could you not shim an invisible background underneath the dropdown when it opens so that you protect the area around the dropdown from accidentally being touched.
I used to do a similar thing for hover menus so that they would stay open if you wandered off the list element a little bit.
If its a standard dropdown type of thing then you could add extra padding to the ul containing the items that drop down thus making the ul larger than it needs to be. You then offset the inner list items back to their correct width.
It all depends on how the thing is coded I suppose but you should be able to do something along those lines.
I’ve never had to make this. What is the shim composed of?
The menu is at the right top corner. Would that be a div position: absolute, then right:0, top:0? Then z-index:-500 or something? Then guess at a width and height px?
Unfortunately, I have no idea of how the div would appear only when the menu drops down.
Well it all depends on how you’ve constructed your menu but in the simplest css hover drop menu it would look like this.
When you hover the trigger element you will see that there is a partially opaque background around the menu protecting you from touching anything underneath. Obviously you would just remove the background but the effect will be the same.
Of course it will need to be tied to your example and you should ensure that the shim doesn’t go out of the viewport etc (which shouldn’t be a problem if you know where the menu is to be positioned).
Even if you have a js menu you should be able to do the same sort of thing.
That has nothing to do with your problem and is just the standard way to place the dropdown exactly under the trigger element without needing to know the pixel height of the top level.
100% means place the dropdown at 100% from the top of the relatively placed parent which ensures the dropdown starts exactly at the bottom of that element.
The shim in my example is created with the :after rule I added.
I am leaving out the hover parts because this is an app which doesn’t use hover. Is this correct usage of your code, or do I move those parts elsewhere?
If you have a js version for mobile then you may or may not be utilising the same structure as there are not the same constraints when you are dynamically manipulating the html. If you are simply substituting the hover effect by adding a class to the same elements then the :hover rules would be changed to .hover (or whatever class name you added).
All this is conjecture without seeing the actual menu in action. If you have a live link to the page then it would help debug or at least a cut-down demo showing the code and js you are using.
You can squeeze the window tight to simulate mobile so the menu drops over a button below. For instance, click on Menu > Parts List, then Menu > Tips, an option that’ll be positioned over a button.
As I said, this works perfectly on desktop, but you should be able to see how the menu is configured. I put your CSS right on the pages needing it (including Tips and Parts).
The menu is plain html on index.html, but constructed by JS in /js/app.js. The menu code is found in js/materialize.js as class=dropdown-content.
This has turned into a js question as I think the problem is that you are closing the dropdown with js when it is clicked which leaves your finger touching the element below as the dropdown fades away and thus you activate the button underneath.
If you are navigatiing away from the page then I don’t see a need to hide the dropdown as you will be going to a new page anyway.
// Click handler to show dropdown
origin.unbind('click.' + origin.attr('id'));
origin.bind('click.'+origin.attr('id'), function(e){
if (!isFocused) {
if ( origin[0] == e.currentTarget &&
!origin.hasClass('active') &&
($(e.target).closest('.dropdown-content').length === 0)) {
e.preventDefault(); // Prevents button click from moving window
placeDropdown('click');
}
// If origin is clicked and menu is open, close menu
else if (origin.hasClass('active')) {
hideDropdown();
$(document).unbind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id'));
}
// If menu open, add click close handler to document
if (activates.hasClass('active')) {
$(document).bind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id'), function (e) {
if (!activates.is(e.target) && !origin.is(e.target) && (!origin.find(e.target).length) ) {
hideDropdown();
$(document).unbind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id'));
}
});
}
}
});
The js is too complicated for me but I;m sure the problem is that the menu closes when you touch the page and because of touch delay the menu is gone and you are therefore touching anything underneath instead.
We may need to move this to the JS forum for expert help if you think the issue is there.
If your analysis is correct, then I merely need to remove the 300ms delay on the iPhone. There is a plugin for that. I’ll include that and see if that takes care of the issue.
Don’t move this to the JS site yet. If the problem persists, I’ll post there.