RadComboBox width in Firfox & Chrome

11 posts, 0 answers
  1. Steven
    Steven avatar
    8 posts
    Member since:
    Mar 2009

    Posted 02 Oct 2009 Link to this post

    Our site works fine in IE, but when viewed in firefox or Chrome all off the RadComboBoxes extend way past their defined width and stretch off the screen. An example of the code is:

    <asp:TableCell HorizontalAlign="Left" ColumnSpan="3">

     

     

     

    <telerik:RadComboBox ID="cmbCountry" runat="server" AllowCustomText="false" AutoPostBack="true"    OnTextChanged="SelectCountryPrompts" TabIndex="1" Width="150" >

     

     

     

    <Items>

     

     

     

    <telerik:RadComboBoxItem runat="server" Text="Select Country" Value="Select" />

     

     

     

    <telerik:RadComboBoxItem runat="server" Text="United States" Value="USA" />

     

     

     

    <telerik:RadComboBoxItem runat="server" Text="Canada" Value="Canada" />

     

     

     

    </Items>

     

     

    </telerik:RadComboBox>

     

     

     

    </asp:TableCell>

    Which renders fine in IE. It does not matter what I change the width proprty to, the textbox is always extedns to the end of the screen in FireFox & Chrome.  All other controls render fine. Any help would be appreciated. Thank you

     

  2. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 05 Oct 2009 Link to this post

    I did a quick copy+paste into a project to see if I would see the same behavior with FF/Chrome but the width was the same across both of them + IE. Maybe it's another part of your app that is causing it? I see the <asp:TableCell> tags, which could have something to do with it.
  3. Hans Gunnar
    Hans Gunnar avatar
    13 posts
    Member since:
    Jan 2009

    Posted 15 Oct 2010 Link to this post

    Just figured out a bug with RadComboBox use in Chrome (works fine in FF and IE8).

    If you have a RadComboBox inside a tablecell where the style-tag "white-space: nowrap;" is set, the width of the RadComboBox will be around 150px no matter what value you set. Tested with Telerik v2009.3.1314.35.

    Could be the issue in this case...
  4. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 22 Oct 2010 Link to this post

    Hi Hans Gunnar,

    What is the version of RadControls for ASP.NET AJAX that you use?
    Could you please provide us a sample code and instructions how to reproduce the issue?
    Thank you in advance.

    Greetings,
    Kalina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Brian Azzi
    Brian Azzi avatar
    65 posts
    Member since:
    Mar 2010

    Posted 24 Aug 2012 Link to this post

    I realize this is an older thread/issue, but I have experienced the exact behavior in my project using the latest version of the ComboBox control.

    In my case, I had a RadComboBox placed inside a user control for use as a grid filter control. In Chrome, it would always render to about 159px... overflowing the size of the actual columns.

    Thanks to this post, I found it related to a custom style I had set on the grid to help prevent overflow of header text:

    .RadGrid_Black td
    {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis; 
    }

    In this case, the white-space: nowrap was applied, and caused the RadComboBox width to incorrectly render. I'm not quite sure how to handle this problem now... as I do need that css behavior for other reasons and am hesitant to just remove it...
  6. Brian Azzi
    Brian Azzi avatar
    65 posts
    Member since:
    Mar 2010

    Posted 24 Aug 2012 Link to this post

    If anyone runs into it and needs it... this put me on the right path. I simply moved the nowrap to the row styles rather than for the full grid (so the filter rows do not get it)... and it seems to still be properly wrapping my cell contents.

    .RadGrid_Black td
    {
        /* white-space: nowrap !important; */
        overflow: hidden !important;
        text-overflow: ellipsis; 
    }


    .RadGrid_Black .rgRow,
    .RadGrid_Black .rgAltRow  
    {
    white-space: nowrap !important;
    }
  7. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 29 Aug 2012 Link to this post

    Hi Brian Azzi,

    I am glad that you managed to find a solution on your own.
    Thank you for posting it for the community.

    Regards,
    Kalina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Sophie
    Sophie avatar
    33 posts
    Member since:
    Aug 2012

    Posted 17 Jan 2013 Link to this post

    Hello,
    I'm currently having this issue in Chrome and Firefox as well, Firefox 14.0.1 and Chrome 24.0.1312.52m.
    I'm using Telerik 2012.1.215.35.
    My RadComboBox is in a userControl as well. I browsed my code, and the white-space is set to normal for those.
    The comboBox appear about at 153px width, and with the width=100% property set, it should appear about to a width of 178px (RadTextBox next to it appear at 178px, css width of 100%).
    This is my hierarchy:
    <RadMenu>
    <div>
    <dl><dd><div><RadComboBox></div></dd></dl>
    </div>
    </RadMenu>
    This is the css of the table contained in the telerik combo box :
    border-right-width: 0px;
    width: 100%;
    border-collapse: collapse;
    border-top-width: 0px;
    table-layout: fixed;
    border-bottom-width: 0px;
    border-left-width: 0px;

    the div containing that RadComboBox has this style:
    width: 100%;

    and this is the css for the <dd> containing that div:
    white-space: normal;
    width:50%; //the other half is a label
     
    and this is the css for the <dl> containing that <dd>:
    white-space: normal;
    width:65%;//the other part is a checkbox

    And all of this is contained in a div container with that css:
    white-space:normal;
    width:550px;

    Here is the css inside the RadMenu (Seen by firebug):
    white-space: nowrap;

    There is my white-space: nowrap... I moved it to the div containing the RadComboBox but still no result.
    I tried modifying the css value of width in pixels of the div containing the RadComboBox but no result.
    I observed in firebug that when i modify the value, the blue highlighted part is bigger but not the RadComboBox itself.
    So i really have no idea what could be causing this. :(
    Sophie.
  9. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    651 posts

    Posted 24 Jan 2013 Link to this post

    Hi, Sophie.

    Would it be possible for you to open a support ticket and attach a sample page that exhibits this behaviour? You have described your case pretty well, yet I am unable to produce it exactly as you have it.

    I should note that we have made improvements with the ComboBox for the last year and it is quite possible that the issues will be resolved by just updating your DLL files. Yet, I need to see your test case to be sure.

    Regards,
    Ivan Zhekov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Sophie
    Sophie avatar
    33 posts
    Member since:
    Aug 2012

    Posted 24 Jan 2013 Link to this post

    Hello Ivan.
    My team and i are currently doing a code review to see if all the problems we're having can be fixed. We are in process to get the latest version too. If our code review doesn't fix anything, ill look to create a sample to illustrate my problem. Thanks. If we find the solution, i'll post it too.
  11. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    651 posts

    Posted 25 Jan 2013 Link to this post

    Hello, Sohpie.

    When speaking of upgrading, this time next week there will be a Beta release of the 2013 Q1. With it, we'll ship tons of new stuff, but the one related to this thread will be the following two:

    -- light render mode for the RadComboBox, which does not use TABLE element for rendering
    -- a separate DropDownList control, which depending on the case might prove better than the ComboBox

    That's just a heads up, for your consideration.

    Regards,
    Ivan Zhekov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top