I am currently tackling a significant issue: I need the drop-down options' width to be wider than where the selected value is displayed, especially in IE7. After conducting some research on Google, I decided to take matters into my own hands and write my custom solution to enhance styling capabilities.
What I have implemented is using an input text box to showcase the selected value. The input's width is derived from its parent div. Subsequently, I dynamically generate an unordered list for the drop-down options. To extend the options beyond the parent div's width, I utilized negative margins and overflow-x: visible.
The challenge arises when clicks and scrolling fail to function properly in the area of each drop-down option that exceeds the parent div's width. Is there a workaround for this issue?
For context, I leverage jQuery for event handling. I applied a delegated click handler on the ul element for each li element.
The static HTML:
<div id="dropDownDiv" style="width: 155px;">
<input type="text" />
</div>
<script>
$(createDropDown("dropDownDiv")):
</script>
The functions responsible for creating the drop-downs:
function createDropDown(inputId) {
var fragment = $(document.createElement('ul')),
countryList = ${countriesJS};
for(var i = countryList.length-1; i >= 0; i=i-1) {
$("<li code='" + countryList[i][1] + "'>" + countryList[i][0] + "</li>").prependTo(fragment);
}
fragment.addClass("hidden menuOptions");
$(inputId).append(fragment);
$(inputId).on("click", function(e) {fragment.removeClass("hidden");});
fragment.on("click", "li", handler);
}
Here is a jsFiddle. My example functions correctly in jsFiddle but not in IE7. http://jsfiddle.net/rpmc22/vAP56/
This is a brief overview. Essentially, any click occurring to the right of the red line fails to trigger a click event.