Natural behaviour of an input field when you click on the 'body' of the document, is to blur the element. However with the autocomplete directive on desktop this works, but on mobile it never lets you close the menu unless you pick an item or refresh the page.
I thought this was just my setup, however if you run chrome and emulate an iphone 5 it does not close the autocomplete dropdown list when you click outside it.
Is this possible out of the box?
One option is set your css with rule under:
.md-scroll-mask{
display none
}
Related
When a bootstrap dropdown is open, opening another dropdown requires two taps. This is because of an overlaying div that swallows all other input in order to close the first dropdown.
This is a known bug. According to the bootstrap documentation:
On mobile devices, opening a dropdown adds a .dropdown-backdrop as a
tap area for closing dropdown menus when tapping outside the menu, a
requirement for proper iOS support. This means that switching from an
open dropdown menu to a different dropdown menu requires an extra tap
on mobile.
However, the behaviour is not consistent. The backdrop overlay is not applied to dropdowns within a .navbar-nav, and as far as I can tell, everything appears to work just fine for me on my iPhone (Safari).
Check out this jsfiddle to see the different behaviours.
Does anyone know more about the iOS-specific issue that this is supposed to be for, and does anyone have a browser-compatible workaround for this?
I've posted some potential solutions in this jsfiddle.
1) Hiding the backdrop
.dropdown-backdrop {
display: none;
}
2) Applying .navbar-nav to the dropdowns (and removing the negative margins).
Working on Windows (Chrome) and iPhone (Safari). Not tested any more than that. Does anyone know any issues with these approaches? It seems too easy...
Apparently this is due to "click" events not bubbling up to the body properly in iOS Safari, which would make Bootstrap unable to listen for dismiss clicks with one global handler. It appears that a different workaround has been added for Bootstrap 4 so that a backdrop is no longer required:
https://github.com/twbs/bootstrap/pull/22426
I tried with focus, select, triggering click/tap events but no luck.
I see Facebook sign up page implementing this.There is a exclamation mark. It will show up if you touch any of the birthday select control without changing it and then focus elsewhere. The interesting thing happens when you tap the exclamation mark on iPad Safari. The year options will show up. (It doesn't show on desktop Chrome which I'm using to type this ask).
So the question is how to implement the same behavior for iPad?
I put the picture of the Facebook sign up page at http://imgur.com/Hh6JHPW
Some code I tried:
$('#someselect').val('test');
$('#someselect').focus();
$('#someselect').click();
$('#someselect').prop('selectedIndex',0);
$('#someselect').mousedown();
$('#someselect').prop('size',10);
You can just use a hidden <label> with some Javascript to show it if the dropdown's value is the default.
jsfiddle
$('fltr1').onfocus = function() {
$('fltr1').setStyle({width: "auto"});
}
Using Prototype.js, I'm trying to make an IE7 compatible dropdown menu box change width to auto when the user clicks it. As it is now, when the user clicks this box, it successfully expands it's width, but the box doesn't open until you click again, requiring 2 clicks. The first click expands, the second click opens the box allowing you to select an item. It's like the first click triggers the set width event, then stops everything else and forces the dropdown shut. I've tried onclick and it does the same thing, adjusts the width but closes the dropdown until you second click.
How can I stop this from requiring two clicks? What is causing the dropdown to close when setting the width?
I don't think you can make this work with your current approach in IE7. When the browser repaints the select box it closes the dropdown. You'd think it would be possible to manually re-open it with the click event but that isn't possible with the native select box, see this discussion:
How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?
As a workaround, you could move the resize to the mouseover event? Maybe for IE7 only if you want to preserve the behaviour in other browsers?
$('fltr1').onmouseover = function() {
this.setStyle({width: "auto"});
}
I am developing an HTML based android app.
I need to implement option menu like the native android menu on long screen tap.
I thought to use invisible elements (positioned out of the viewable area), and cause showing the list by firing the click event.
Not working...
Any workaround?
I've created a watermark/hint solution for a drop down where I absolutely position a label over top of a select element.
Unfortunately, when the user clicks where the label is, the drop down doesn't open - obviously the click is being blocked by the label. Is there any way to have it so when a user clicks on the label, the drop down is opened? I understand you can't open a dropdown via javascript but can you do something like hide the label when the click fires?
Edit: Creating a custom drop down like gmail does on their dropdowns is not a viable option.
CSS can handle that: add pointer-events: none to the label.
That's supported in all modern browsers.. except for current versions of IE (and Opera), so you'll still unfortunately have to use JavaScript.