By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,255 Members | 1,701 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,255 IT Pros & Developers. It's quick & easy.

Two Vertical Scrollbars in select and DIC

P: 1
Hi All,

I have a sample page in which I am enclosing a <Select within a DIV, The purpose is to have a horizontal scrollbar for the <Select. The page is working perfectly fine. But I notice that when the no of items in the <select is increasing many fold, the listbox is displaying its own scrollbar, even though the DIV is having space, resulting in two scrollbars. I am Unable to figure out why it is happening like this. If I reduce the font size, then the list is able to accomodate a few more entries. For ur reference I am attaching the code below.

Please copy paste the options to more than 2000 items. The problem will come up.

Thanx in Advance.
[html]
<html>
<head><title> Testing select option</title>
<script language="javascript">
function OnDivSrcScroll()
{
if (SourceAccounts.options.length > 17)
{
SourceAccounts.size=SourceAccounts.options.length;
}
else
{
SourceAccounts.size=17;
}
}

function OnSrcSelectFocus()
{

if (document.getElementById("divSrcAccounts").scrollL eft != 0)
{
document.getElementById("divSrcAccounts").scrollLe ft = 0;
}

}
</script>
</head>
<body>

<br><BR><HR>
Please Choose
<div id='divSrcAccounts'
style="overflow:auto;position: relative;width:300px;HEIGHT: 233px;"
onscroll="OnDivSrcScroll();" >

<SELECT size="17"
name="SourceAccounts" multiple onfocus="OnSrcSelectFocus();" >

<OPTION value="003000109">003000109&nbsp;&nbsp;&nbsp;FCIA DEL PUEBLO</OPTION>

<OPTION value="003000133">003000133&nbsp;&nbsp;&nbsp;FCIA DEL CARMEN *OROCOVIS*GNP*</OPTION>

<OPTION value="003000158">003000158&nbsp;&nbsp;&nbsp;U-SAVE PHARMACY L.L.C. *GNP*</OPTION>

<OPTION value="003000182">003000182&nbsp;&nbsp;&nbsp;FCIA NUEVA,JM PHA GRP INC*GNP*</OPTION>

<OPTION value="003000109">003000109&nbsp;&nbsp;&nbsp;FCIA DEL PUEBLO</OPTION>

<OPTION value="003000133">003000133&nbsp;&nbsp;&nbsp;FCIA DEL CARMEN *OROCOVIS*GNP*</OPTION>

<OPTION value="003000158">003000158&nbsp;&nbsp;&nbsp;U-SAVE PHARMACY L.L.C. *GNP*</OPTION>

<OPTION value="003000182">003000182&nbsp;&nbsp;&nbsp;FCIA NUEVA,JM PHA GRP INC*GNP*</OPTION>
<OPTION value="003000109">003000109&nbsp;&nbsp;&nbsp;FCIA DEL PUEBLO</OPTION>

<OPTION value="003000133">003000133&nbsp;&nbsp;&nbsp;FCIA DEL CARMEN *OROCOVIS*GNP*</OPTION>

<OPTION value="003000158">003000158&nbsp;&nbsp;&nbsp;U-SAVE PHARMACY L.L.C. *GNP*</OPTION>

<OPTION value="003000182">003000182&nbsp;&nbsp;&nbsp;FCIA NUEVA,JM PHA GRP INC*GNP*</OPTION>
<OPTION value="003000109">003000109&nbsp;&nbsp;&nbsp;FCIA DEL PUEBLO</OPTION>

<OPTION value="003000133">003000133&nbsp;&nbsp;&nbsp;FCIA DEL CARMEN *OROCOVIS*GNP*</OPTION>

<OPTION value="003000158">003000158&nbsp;&nbsp;&nbsp;U-SAVE PHARMACY L.L.C. *GNP*</OPTION>

<OPTION value="003000182">003000182&nbsp;&nbsp;&nbsp;FCIA NUEVA,JM PHA GRP INC*GNP*</OPTION>

</SELECT>


</div>
</body>
</html>[/html]
Apr 2 '08 #1
Share this Question
Share on Google+
1 Reply


jhardman
Expert 2.5K+
P: 3,405
Expand|Select|Wrap|Line Numbers
  1. style="    height: 233px; 
  2.     width: 295px; 
  3.     overflow: scroll;"
This style attribute in the code in the select (and eliminate the div) should do everything you want, but I checked in both FF and IE, and neither one worked. Sorry. Are you still looking for a solution?

Jared
May 14 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.