DropDownList is not working correctly in Mozilla 2.0

I've run into a problem with a ddl not displaying the vertical scrollbar in FF (2.0). When I use a large font size for the ddl, the list runs off the page without displaying a scrollbar. However, it works correctly if the list is over 20 items. In my testing, it seems the scrollbar is generated only when the list exceeds 20 items regardless of the font size used in the code. All scenarios work correctly in IE7.

I am attaching the sample code used to test this problem. What am I missing?


<div>
        <asp:Label ID="Label1" runat="server" ForeColor="red" Text="20 Items: Default Font Size"></asp:Label>
        <asp:DropDownList ID="DropDownList1" runat="server" >
            <asp:ListItem Value="1">Item1</asp:ListItem>
            <asp:ListItem Value="2">Item2</asp:ListItem>
            <asp:ListItem Value="3">Item3</asp:ListItem>
            <asp:ListItem Value="4">Item4</asp:ListItem>
            <asp:ListItem Value="5">Item5</asp:ListItem>
            <asp:ListItem Value="6">Item6</asp:ListItem>
            <asp:ListItem Value="7">Item7</asp:ListItem>
            <asp:ListItem Value="8">Item8</asp:ListItem>
            <asp:ListItem Value="9">Item9</asp:ListItem>
            <asp:ListItem Value="10">Item10</asp:ListItem>
            <asp:ListItem Value="11">Item11</asp:ListItem>
            <asp:ListItem Value="12">Item12</asp:ListItem>
            <asp:ListItem Value="13">Item13</asp:ListItem>
            <asp:ListItem Value="14">Item14</asp:ListItem>
            <asp:ListItem Value="15">Item15</asp:ListItem>
            <asp:ListItem Value="16">Item16</asp:ListItem>
            <asp:ListItem Value="17">Item17</asp:ListItem>
            <asp:ListItem Value="18">Item18</asp:ListItem>
            <asp:ListItem Value="19">Item19</asp:ListItem>
            <asp:ListItem Value="20">Item20</asp:ListItem>
            </asp:DropDownList>
        <br />
        <br />
 
        <asp:Label ID="Label2" runat="server" ForeColor="red" Text="20 Items: Font-Size='XX-Large'"></asp:Label>              
        <asp:DropDownList ID="DropDownList2" runat="server" Font-Size="XX-Large">
            <asp:ListItem Value="1">Item1</asp:ListItem>
            <asp:ListItem Value="2">Item2</asp:ListItem>
            <asp:ListItem Value="3">Item3</asp:ListItem>
            <asp:ListItem Value="4">Item4</asp:ListItem>
            <asp:ListItem Value="5">Item5</asp:ListItem>
            <asp:ListItem Value="6">Item6</asp:ListItem>
            <asp:ListItem Value="7">Item7</asp:ListItem>
            <asp:ListItem Value="8">Item8</asp:ListItem>
            <asp:ListItem Value="9">Item9</asp:ListItem>
            <asp:ListItem Value="10">Item10</asp:ListItem>
            <asp:ListItem Value="11">Item11</asp:ListItem>
            <asp:ListItem Value="12">Item12</asp:ListItem>
            <asp:ListItem Value="13">Item13</asp:ListItem>
            <asp:ListItem Value="14">Item14</asp:ListItem>
            <asp:ListItem Value="15">Item15</asp:ListItem>
            <asp:ListItem Value="16">Item16</asp:ListItem>
            <asp:ListItem Value="17">Item17</asp:ListItem>
            <asp:ListItem Value="18">Item18</asp:ListItem>
            <asp:ListItem Value="19">Item19</asp:ListItem>
            <asp:ListItem Value="20">Item20</asp:ListItem>
        </asp:DropDownList>
        <asp:Label ID="Label5" runat="server" ForeColor="red" Text="**Missing Vertical Scrollbar in Mozilla 2.0**"></asp:Label>        
        <br />
        <br />
        <br />
        <br />
        
        <asp:Label ID="Label3" runat="server" ForeColor="red" Text="21 Items: Default Font Size"></asp:Label>
        <asp:DropDownList ID="DropDownList3" runat="server" >
            <asp:ListItem Value="1">Item1</asp:ListItem>
            <asp:ListItem Value="2">Item2</asp:ListItem>
            <asp:ListItem Value="3">Item3</asp:ListItem>
            <asp:ListItem Value="4">Item4</asp:ListItem>
            <asp:ListItem Value="5">Item5</asp:ListItem>
            <asp:ListItem Value="6">Item6</asp:ListItem>
            <asp:ListItem Value="7">Item7</asp:ListItem>
            <asp:ListItem Value="8">Item8</asp:ListItem>
            <asp:ListItem Value="9">Item9</asp:ListItem>
            <asp:ListItem Value="10">Item10</asp:ListItem>
            <asp:ListItem Value="11">Item11</asp:ListItem>
            <asp:ListItem Value="12">Item12</asp:ListItem>
            <asp:ListItem Value="13">Item13</asp:ListItem>
            <asp:ListItem Value="14">Item14</asp:ListItem>
            <asp:ListItem Value="15">Item15</asp:ListItem>
            <asp:ListItem Value="16">Item16</asp:ListItem>
            <asp:ListItem Value="17">Item17</asp:ListItem>
            <asp:ListItem Value="18">Item18</asp:ListItem>
            <asp:ListItem Value="19">Item19</asp:ListItem>
            <asp:ListItem Value="20">Item20</asp:ListItem>
            <asp:ListItem Value="21">Item21</asp:ListItem>
        </asp:DropDownList><br />
        <br />
        
        <asp:Label ID="Label4" runat="server" ForeColor="red" Text="21 Items: Font-Size='XX-Large'"></asp:Label>
        <asp:DropDownList ID="DropDownList4" runat="server" Font-Size="XX-Large">
            <asp:ListItem Value="1">Item1</asp:ListItem>
            <asp:ListItem Value="2">Item2</asp:ListItem>
            <asp:ListItem Value="3">Item3</asp:ListItem>
            <asp:ListItem Value="4">Item4</asp:ListItem>
            <asp:ListItem Value="5">Item5</asp:ListItem>
            <asp:ListItem Value="6">Item6</asp:ListItem>
            <asp:ListItem Value="7">Item7</asp:ListItem>
            <asp:ListItem Value="8">Item8</asp:ListItem>
            <asp:ListItem Value="9">Item9</asp:ListItem>
            <asp:ListItem Value="10">Item10</asp:ListItem>
            <asp:ListItem Value="11">Item11</asp:ListItem>
            <asp:ListItem Value="12">Item12</asp:ListItem>
            <asp:ListItem Value="13">Item13</asp:ListItem>
            <asp:ListItem Value="14">Item14</asp:ListItem>
            <asp:ListItem Value="15">Item15</asp:ListItem>
            <asp:ListItem Value="16">Item16</asp:ListItem>
            <asp:ListItem Value="17">Item17</asp:ListItem>
            <asp:ListItem Value="18">Item18</asp:ListItem>
            <asp:ListItem Value="19">Item19</asp:ListItem>
            <asp:ListItem Value="20">Item20</asp:ListItem>
            <asp:ListItem Value="21">Item21</asp:ListItem>            
        </asp:DropDownList>                
    </div>

Open in new window

baitechAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ThogekCommented:
I don't think that there's anything you can do from your server-side ASPX code, nor the client-side HTML or CSS, to control how many items an HTML drop-down can contain before displaying a scrollbar.  It's an aspect of the client Web browser, and I believe a constant for each browser.

What exactly are you trying to do?  Induce a drop-down's scrollbar, or...?
0
baitechAuthor Commented:
I'm developing a simple web app for a handheld internet device. The screen is 3.5" wide so I have to use large fonts for the user to actually see something. I'm simply trying to use a standard ddl with about 15 items in the list. If I leave the font size at default, it fits on the screen just fine. If I go with a large font, the list runs off the screen with no scrollbar and the user cannot get to those items.

This device uses the Mozilla engine and does not seem to account for larger font sizes affecting the height of the list. FFox has the exact same behavior on my laptop - 21 items in the list is the magic number to get a scrollbar. IE7 handles everything correctly.

At this point, it seems my options are
1) go with the default font size (unreadable on the device)
2) report this issue to bugzilla
3) create some type of fake ddl with a listbox and a graphic
0
ThogekCommented:
Ah.  an interesting predicament...

I'm not aware of anything that the application developer (whose app is being viewed via IE or FF) can do to affect the threshhold of optinos at which the scrollbar appears.

FF's failure to take screen size into account in this decision sounds like a good issue for Bugzilla to me.

Sorry not to be more helpful...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
baitechAuthor Commented:
Thanks for the help anyway.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.