Horizontal Scroll and Tool Tip in a select option form element.
Developers may sometimes want to have a horizontal scroll bar nested at the bottom of select option fields.
There is a way to encapsulate the select and option elements with a DIV tag.
<cfquery name="getDepartment" datasource="cfdocexamples">
SELECT Dept_ID,Dept_Name
FROM Departments
</cfquery>
<form>
<div style="overflow-x:scroll; width:200px; overflow: -moz-scrollbars-horizontal;">
<select name="thisSelectList" size="5">
<cfoutput query="getDepartment">
<option value="#Dept_ID#" title="#Dept_Name#">#Dept_Name# </option>
</cfoutput>
</select>
</div>
</form>
SELECT Dept_ID,Dept_Name
FROM Departments
</cfquery>
<form>
<div style="overflow-x:scroll; width:200px; overflow: -moz-scrollbars-horizontal;">
<select name="thisSelectList" size="5">
<cfoutput query="getDepartment">
<option value="#Dept_ID#" title="#Dept_Name#">#Dept_Name# </option>
</cfoutput>
</select>
</div>
</form>
There are no comments for this entry.
[Add Comment]