I've a CSS dropdown menu containing a select box that extends beyond the menu's
bottom border when opened. Subsequent clicking on a select option that lies beyond
the menu's bottom border causes the menu to close (i.e., ":hover" no longer applies
once the select closes).
Is there a way around this? It'd be great if I could force the select to "drop up",
but I've not found a way to force this to happen.
Any ideas?
One solution would involve limiting the height of the select, so that it doesn't jut out, or making it always drop-up. This answer discusses those options a bit.
Selects aren't typical HTML elements. We're pretty restricted in styling them, and I'm not entirely sure how much control we'll have even when the the shadow DOM is more widely accessible (I've been meaning to test!). The reason of my uncertainty is that it seems that some browsers, like Safari and Chrome, appear to use OS APIs for their selects, whereas other browsers, like Firefox, clearly use the Shadow DOM.
With all of this said, I think the easiest solution for you would be using a Javascript select plugin to completely get around this issue of modifying the select itself.
The idea of using Javascript is pretty simple. You'll hide the actual select and insert new DOM elements (like divs) to replace it. These divs can be styled to look like a select, and programmed to behave as you'd prefer the select to. And any changes to this facade are applied to the real, hidden select, so that forms can be submitted and manipulated as usual.
Bootplus is just one example of a plugin that has a drop-up. It'd be fairly easy to pull that component from the code.
Chosen is another good plugin that I'm pretty sure lets you limit the size of the dropdown as another alternative.
Or you could run some Google searches and find more!
In short: The current best option for cross-browser control over how a select displays and behaves is using a Javascript plugin.
Related
In the question https://stackoverflow.com/questions/33907611/controlling-line-spacing-with-br-firefox-rendering-differences-with-html4-doc, I wanted to show the boxes of HTML elements, as that would have clarified the problem best. Unfortunately, I couldn't find a way to select multiple elements when using the Firefox inspector, so I had to select each element individually, take a screenshot, and then combine the screenshots into an animated gif like this:
... which is a rather tedious and time-consuming job.
Is there a way to do a multiple selection - either from the main browser window, or from the HTML tree in the inspector in the bottom - such that the element boxes of the selected elements are all indicated/shown simultaneously? I tried Ctrl+click-ing, that doesn't work...
Alternatively, is there another addon/browser/tool that can do this (maybe Chrome?)
In going through the latest release of Google Developers' EDIT THE DOM section for Chrome, there is no mention of the ability to select multiple elements. This suggests the feature doesn't exist.
A similar question came to the same conclusion, albeit the link reference wasn't much help.
Thinking about it logically, however, there's really no way such a feature could reasonably work: Once an element is highlighted, dev tools (or Inspector) populates the right panel with the element's styles, computed values, event listeners, and other unique data. How could dev tools do this for two or more elements at a time? Maybe it's technically possible, but the appearance would be messy, cluttered and potentially confusing.
I have a select box where each option has the potential to be very long. On desktop it's fine, but on mobile the text gets cutoff at the end of each line with an ellipsis. I need to be able to show the full text, or else the options may not be clear to my users. If I can make the text wrap rather than cutting off that would be fine, but I don't know how to accomplish this since I'm not sure how the iPhone handles select elements.
Select options on iPhone
According to this StackOverflow answer, there is no way to change the styling of <select> elements on iOS, as their display styles are built into the browser and not modifiable via CSS.
This answer suggests that you can use a customizable replacement such as Chosen if you would like more control over the style of your <select> boxes.
Apparently Chosen doesn't support iOS. A comment on another answer recommends Selectize.js as an iOS-compatible replacement.
I wish to animate a page always from the right when switching between two pages. Why? Because the 'next' page is always dynamically loaded. Is there a neat way to do this? I am self answering with a hack, however I am looking for a way that isn't messing witht the DOM.
It is possible to achieve this effect by switching the DOM order of the elements instead of switching the selected property of the <core-animated-pages>. A way to do this can be found in this answer. The disadvantage is that it makes is very hard to switch between transition types (if so you were to wish) and makes for some ugly code either way.
When you touch an element, such as an edit box, in a web page on the iPad, it turns gray while you are touching it.
I have a table wrapped by a floating div. Instead of an individual data element or row going gray, the whole table (or its wrapping div) goes gray when a data element is touched. (The function of this table is an autocomplete pop-up)
Elsewhere in the site, I have a table in which only the touched data element goes gray.
I wondered if anyone could direct me to an explanation of the logic behind this graying on touch, so that we can code our table to give the desired behavior. Ideally, we'd like the row to highlight when it is touched.
In the alternative, if we could turn off this graying behaviour, that would be another option. We could then code the highlighting ourselves. Is there a way to turn off this behavior for particular html elements?
Thanks.
This author suggests a solution to remove the highlighting:
If for whatever reason you don't want some elements of your web site or application to be highlighted, simply add the following CSS rule to the corresponding elements.
-webkit-tap-highlight-color: rgba(0,0,0,0);
It won't disable the highlighting, but it will make it invisible (an opacity of zero).
I have not tested this, however.
I have discovered something about the "logic" behind the graying behavior. It seems that elements that have handlers such as onclick, onmousedown etc. exhibit the behavior and those without such handlers don't. A (somewhat tedious) workaround for us is to change the code of the autocomplete so that each row has its own onmousedown etc. handler rather than the wrapping div taking care of this.
Try styling the wrapper div with select:none;
That should turn it off, and then you could code the highlight onfocus yourself.
Most browsers actually do this, but it's a bit more noticeable on the iPad and other Apple touch products. It's really for usability purposes, so I would only recommend disabling it if it is causing problems like the one you mentioned. It serves to help the user know what they are clicking, and gives them a chance to move their finger away if they are on the wrong thing.
I need to create a dropdown, which can contain 100s of options.
I need a scrollbar to appear and be consistent across all browsers.
Google came up empty: Is there a good URL that describes if this is consistent or not?
I would strongly recommend against having a scrollable select with 100s of options for usability reasons.
With exception of one corner case, navigating (both searching in, and selecting from) that list is a really really hard and very annoying to the user.
The UI design reasoning is that it requires:
Wide mouse gesture (tiring), followed by immediate precise stop (hard to do because of inertia)
Very difficult to use interface of a scrollbar (extra crap points for scrollbar being in the middle of the page instead of on the right side) - see Jacob Nielsen's and others' usual ranting about difficulties of using scrollbars and general evil of anything too long that requires much scrolling.
Eyes need to scan whole page worth of menu up and down and back, all the time. very tiring.
Here is a set of bad examples
[ the corner case is when all the option names are uniformly distributed across the alphabet (as far as the first letter), which allows somewhat-possible keyboard-only navigation in the drop-down via pressing the first letter of an option ].
A proper UI solution is to have a select whose contents are dynamically populated based on a search field - either typed text (think Google's new search box, or browser's address bar) or sometimes checkboxes/radio buttons.
BTW, sub-menu solutions also suck for mouse navigation - minor twitch of the wrist and you lost all of the pointing work.
I apologize that this answer is not an answer to "how do you solve my technical problem", but I am of a very strong opinin that you're solving the wrong problem in the first place.
HTH.
The short answer is no, for the standard HTML select element and the requirements you describe.
However, do you know you can set the size attribute for how many rows are visible at one time? AFAIK this will force scrolling in all browsers, but it isn't a drop down. Like this:
<select size="10">
<option>etc</option>
...
</select>
There is also the possiblity of optgroup to split the options into categories.
If you have many categories you could do what I did on one site and use this jQuery click menu, using the click function to set a hidden field. So now I have a dropdown with sub-categories and it's quite easy to find the right option.