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="javas cript">
function OnDivSrcScroll( )
{
if (SourceAccounts .options.length > 17)
{
SourceAccounts. size=SourceAcco unts.options.le ngth;
}
else
{
SourceAccounts. size=17;
}
}
function OnSrcSelectFocu s()
{
if (document.getEl ementById("divS rcAccounts").sc rollLeft != 0)
{
document.getEle mentById("divSr cAccounts").scr ollLeft = 0;
}
}
</script>
</head>
<body>
<br><BR><HR>
Please Choose
<div id='divSrcAccou nts'
style="overflow :auto;position: relative;width: 300px;HEIGHT: 233px;"
onscroll="OnDiv SrcScroll();" >
<SELECT size="17"
name="SourceAcc ounts" multiple onfocus="OnSrcS electFocus();" >
<OPTION value="00300010 9">003000109&nb sp; FCIA DEL PUEBLO</OPTION>
<OPTION value="00300013 3">003000133&nb sp; FCIA DEL CARMEN *OROCOVIS*GNP*</OPTION>
<OPTION value="00300015 8">003000158&nb sp; U-SAVE PHARMACY L.L.C. *GNP*</OPTION>
<OPTION value="00300018 2">003000182&nb sp; FCIA NUEVA,JM PHA GRP INC*GNP*</OPTION>
<OPTION value="00300010 9">003000109&nb sp; FCIA DEL PUEBLO</OPTION>
<OPTION value="00300013 3">003000133&nb sp; FCIA DEL CARMEN *OROCOVIS*GNP*</OPTION>
<OPTION value="00300015 8">003000158&nb sp; U-SAVE PHARMACY L.L.C. *GNP*</OPTION>
<OPTION value="00300018 2">003000182&nb sp; FCIA NUEVA,JM PHA GRP INC*GNP*</OPTION>
<OPTION value="00300010 9">003000109&nb sp; FCIA DEL PUEBLO</OPTION>
<OPTION value="00300013 3">003000133&nb sp; FCIA DEL CARMEN *OROCOVIS*GNP*</OPTION>
<OPTION value="00300015 8">003000158&nb sp; U-SAVE PHARMACY L.L.C. *GNP*</OPTION>
<OPTION value="00300018 2">003000182&nb sp; FCIA NUEVA,JM PHA GRP INC*GNP*</OPTION>
<OPTION value="00300010 9">003000109&nb sp; FCIA DEL PUEBLO</OPTION>
<OPTION value="00300013 3">003000133&nb sp; FCIA DEL CARMEN *OROCOVIS*GNP*</OPTION>
<OPTION value="00300015 8">003000158&nb sp; U-SAVE PHARMACY L.L.C. *GNP*</OPTION>
<OPTION value="00300018 2">003000182&nb sp; FCIA NUEVA,JM PHA GRP INC*GNP*</OPTION>
</SELECT>
</div>
</body>
</html>[/html]
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="javas cript">
function OnDivSrcScroll( )
{
if (SourceAccounts .options.length > 17)
{
SourceAccounts. size=SourceAcco unts.options.le ngth;
}
else
{
SourceAccounts. size=17;
}
}
function OnSrcSelectFocu s()
{
if (document.getEl ementById("divS rcAccounts").sc rollLeft != 0)
{
document.getEle mentById("divSr cAccounts").scr ollLeft = 0;
}
}
</script>
</head>
<body>
<br><BR><HR>
Please Choose
<div id='divSrcAccou nts'
style="overflow :auto;position: relative;width: 300px;HEIGHT: 233px;"
onscroll="OnDiv SrcScroll();" >
<SELECT size="17"
name="SourceAcc ounts" multiple onfocus="OnSrcS electFocus();" >
<OPTION value="00300010 9">003000109&nb sp; FCIA DEL PUEBLO</OPTION>
<OPTION value="00300013 3">003000133&nb sp; FCIA DEL CARMEN *OROCOVIS*GNP*</OPTION>
<OPTION value="00300015 8">003000158&nb sp; U-SAVE PHARMACY L.L.C. *GNP*</OPTION>
<OPTION value="00300018 2">003000182&nb sp; FCIA NUEVA,JM PHA GRP INC*GNP*</OPTION>
<OPTION value="00300010 9">003000109&nb sp; FCIA DEL PUEBLO</OPTION>
<OPTION value="00300013 3">003000133&nb sp; FCIA DEL CARMEN *OROCOVIS*GNP*</OPTION>
<OPTION value="00300015 8">003000158&nb sp; U-SAVE PHARMACY L.L.C. *GNP*</OPTION>
<OPTION value="00300018 2">003000182&nb sp; FCIA NUEVA,JM PHA GRP INC*GNP*</OPTION>
<OPTION value="00300010 9">003000109&nb sp; FCIA DEL PUEBLO</OPTION>
<OPTION value="00300013 3">003000133&nb sp; FCIA DEL CARMEN *OROCOVIS*GNP*</OPTION>
<OPTION value="00300015 8">003000158&nb sp; U-SAVE PHARMACY L.L.C. *GNP*</OPTION>
<OPTION value="00300018 2">003000182&nb sp; FCIA NUEVA,JM PHA GRP INC*GNP*</OPTION>
<OPTION value="00300010 9">003000109&nb sp; FCIA DEL PUEBLO</OPTION>
<OPTION value="00300013 3">003000133&nb sp; FCIA DEL CARMEN *OROCOVIS*GNP*</OPTION>
<OPTION value="00300015 8">003000158&nb sp; U-SAVE PHARMACY L.L.C. *GNP*</OPTION>
<OPTION value="00300018 2">003000182&nb sp; FCIA NUEVA,JM PHA GRP INC*GNP*</OPTION>
</SELECT>
</div>
</body>
</html>[/html]
Comment