Problem with DropDownList in IE9 RSS

• • Reply
  

  cmsesan1

  Member

  469 Points

  188 Posts

  Problem with DropDownList in IE9

  Aug 25, 2011 11:18 PM|LINK

  I have Lottery numbers in 6 DropDownLists formatted as 01, 02, 03 etc.

  The numbers used to display fine, and still do in Firefox or if I switch on compatibility mode in IE9.

  My problem is that in IE9 the selected number is displayed with only the first digit showing. For example, 32 when selected displays as 3.

  Here is the page

  <asp:DropDownList id="ddlLotto1" CssClass="ddlLotto1" runat="server"><asp:ListItem Value="0" Text="" /></asp:DropDownList>
  <asp:DropDownList id="ddlLotto2" CssClass="ddlLotto2" runat="server"><asp:ListItem Value="0" Text="" /></asp:DropDownList>
  <asp:DropDownList id="ddlLotto3" CssClass="ddlLotto3" runat="server"><asp:ListItem Value="0" Text="" /></asp:DropDownList>
  <asp:DropDownList id="ddlLotto4" CssClass="ddlLotto4" runat="server"><asp:ListItem Value="0" Text="" /></asp:DropDownList>
  <asp:DropDownList id="ddlLotto5" CssClass="ddlLotto5" runat="server"><asp:ListItem Value="0" Text="" /></asp:DropDownList>
  <asp:DropDownList id="ddlLotto6" CssClass="ddlLotto6" runat="server"><asp:ListItem Value="0" Text="" /></asp:DropDownList>

  Here is the code to fill the DropDownLists

    Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
      For bytCount As Byte = 1 To 49
        ddlLotto1.Items.Add(New ListItem(bytCount.ToString.PadLeft(2, "0"c), bytCount.ToString))
        ddlLotto2.Items.Add(New ListItem(bytCount.ToString.PadLeft(2, "0"c), bytCount.ToString))
        ddlLotto3.Items.Add(New ListItem(bytCount.ToString.PadLeft(2, "0"c), bytCount.ToString))
        ddlLotto4.Items.Add(New ListItem(bytCount.ToString.PadLeft(2, "0"c), bytCount.ToString))
        ddlLotto5.Items.Add(New ListItem(bytCount.ToString.PadLeft(2, "0"c), bytCount.ToString))
        ddlLotto6.Items.Add(New ListItem(bytCount.ToString.PadLeft(2, "0"c), bytCount.ToString))
      Next
    End Sub
  
    Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
      If Not Lotto1 = Nothing Then
        ddlLotto1.SelectedIndex = Lotto1
        ddlLotto2.SelectedIndex = Lotto2
        ddlLotto3.SelectedIndex = Lotto3
        ddlLotto4.SelectedIndex = Lotto4
        ddlLotto5.SelectedIndex = Lotto5
        ddlLotto6.SelectedIndex = Lotto6
      End If
    End Sub

  Here are 2 screenshots to help explain the problem:

  Problem

  Removed as problem resolved.

  No Problem

  Removed as problem resolved.

   

  This was recently upgraded from VS 2008 to VS 2010.

  I would be very pleased is someone could give me a solution. Its really disheartening spending time on this when it used to work fine :(

  Thanks very much for any help.

   

  Regards,
  
  
  Ed
  • Edited by cmsesan1 on Aug 25, 2011 11:25 PM
  • Edited by cmsesan1 on Aug 25, 2011 11:34 PM
  • Edited by cmsesan1 on Aug 25, 2011 11:34 PM
  • Edited by cmsesan1 on Aug 26, 2011 01:46 AM
• • Reply
  

  markfitzme

  Star

  14323 Points

  2217 Posts

  Re: Problem with DropDownList in IE9

  Aug 25, 2011 11:57 PM|LINK

  I would look at the container that the dropdown list is in and see what the width is as it appears that they are trying to adjust width to fit the size of the container and getting squished a little. Basically, this isn't any issue with the the asp.net end, you just need to take a peek at the stylesheets and keep in mind that every browser not only renders fonts slightly differently so some require more width than others, but the styling can take extra pixels. If you notice, it looks like the width of the dropdowns is being rendered identically but the styling in IE 9 is using a few extra pixels that makes the second character un-renderable.

  Don't forget to mark useful responses as Answer if they helped you towards a solution.
  • Marked as answer by cmsesan1 on Aug 26, 2011 01:56 AM
• • Reply
  

  cmsesan1

  Member

  469 Points

  188 Posts

  Re: Problem with DropDownList in IE9

  Aug 26, 2011 01:55 AM|LINK

  You put me on the right track with the CSS.

  The boxes were so wide I could not see how CSS could be causing the text to be hidden.

  I found out that setting height:23px on the DropDownLists was the problem in the CSS. I removed the height attribute and all was well.

  Strangely it did not matter what font-size percentage I set, even a tiny font would be wrapped.

  Thanks very much for your help Mark :)

  Regards,
  
  
  Ed
• • Reply
  

  Raxi

  Member

  8 Points

  6 Posts

  Re: Problem with DropDownList in IE9

  Nov 06, 2012 02:06 PM|LINK

  I am facing the same issue. Did you fix it? I would appretiate if you can share your experience.

• • Reply
  

  cmsesan1

  Member

  469 Points

  188 Posts

  Re: Problem with DropDownList in IE9

  Nov 06, 2012 06:50 PM|LINK

  Setting the height using CSS on the DropDownLists I think was the problem as mentioned.

  e.g. style="height:20px" on the DropDownList or something like .ddl {height:20px} in the CSS stylesheets.

  The problem was that the box was not quite tall enough for the font. Maybe try putting style="height:50px" on the DropDownList to see if that is the problem.

  Hope this helps.

  Regards,
  
  
  Ed
• • Reply
  

  Raxi

  Member

  8 Points

  6 Posts

  Re: Problem with DropDownList in IE9

  Nov 06, 2012 10:41 PM|LINK

  Thank you.

  I really didnt see any height set in css for the dropdownlist. However since i m using jquery tabs, widget-ui SELECT class has font size set which was taller -1em. I fixed it by removing/decreasing the size of the font. But your direction was key for me to point out the culprit in my case. Thanks a lot.