Menu
I am using an HTML SELECT tag and want to make sure the window that opens when the user hits the arrow to position below the "textbox" part of the control.
The problem is that IE seems to just open the window arbitrarily depending on the selection but I need to ensure consistent positioning as there are other elements on the page that need to remain visible at all times
Here's the current markup
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="margin-left: 5px; margin-top: 5px">
<div style="position: relative;">
<select style="position: absolute; top: 10px; left: 10px;">
<optgroup label="Choice A">
<option value="A-A">Sub choice A</option>
<option value="A-B">Sub choice B</option>
</optgroup>
<optgroup label="Choice B">
<option value="B-A">Sub Choice A</option>
<option value="B-B">Sub Choice B</option>
</optgroup>
</select>
</div>
</div>
</body>
</html>
995
Example Explained HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element. Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS.
The <select> element is used to create a drop-down list. The <select> element is most often used in a form, to collect user input. The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).
Sorry. I'm afraid this is not possible. The problem is <select> dropdowns uses browser's native rendering of dropdowns. This means that there is limited styling capability and differ by browsers. I see the behavior you described on my OSX Chrome as well - not opening below the select box.
The only way you can have complete control the styles completely is to use something completely custom - building the <select> using DOM and javascript:
Check out this: http://gregfranko.com/jquery.selectBoxIt.js/
When selecting a library, make sure to pick one that transforms the native <select> tag into custom - IE the markup shouldn't be custom for your HTML. This is so when browsers don't have JavaScript, your <select> dropdown should still work
92
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
