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.
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
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
}
$('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'm trying to implement a "custom" combobox options popup, so that near each option on the list i can place an icon / image.
My goal is to make this as unobtrusive as possible and make it look as close to a regular combo as possible, so, for Chrome and IE, the solution of grabbing the mouse and keyboard events that cause the standard popup to appear works fine:
#el.bind 'mousedown keydown keyup click', (e) =>
(...)
e.stopPropagation()
e.preventDefault()
This basically makes it so that the control is still there, looking native, and whenever the user clicks or focuses it, it shows up the "custom" list instead of the native one.
However, in firefox, as soon as the user clicks the combobox control (< select >), a popupshowing event is triggered, but i can't find a way to cancel it before the popup with the < options > shows up, covering up my "custom" options display implementation.
The only information regarding this event i was able to find, was on the Mozilla XUL documentation.
Thanks in advance.
I looked at the source code and it doesn't appear to be possible to cancel either the mouse event that opens the drop down or the popupshowing event (I don't even know why that event is generated). However I think you might be able to capture the mouse event on a parent element and stop its propagation.
I'm creating a firefox add-on, and I have a situation where if someone clicks on a specific item in my toolbarbutton menupopup, I want to display some text to appear beside the mouse for a couple seconds. I don't mean mouseover text, because when they click on the item, then I close the menupopup. I mean something like what's shown at this site:
http://www.kingsquare.nl/cursormessage
The normal way of doing this would be with javascript and a div that would have the text I want to show. Unfortunately, I've discovered that the toolbarbutton can't have an effect on the main window, which is where I'd need to place the div to show. I've tried getting Jquery to work and haven't been successful either.
You can use panels together with openPopup() and hidePopup(). Remember to set the attribute noautohide to true on the panel.
More info on panels - https://developer.mozilla.org/en/XUL/panel