RadComboBox width in Firfox & Chrome

[Steven]

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

 

[Schlurk]

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.

[Hans Gunnar]

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...

[Kalina]

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

[Brian Azzi]

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...

[Brian Azzi]

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;
}

[Kalina]

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

[Sophie]

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.

[Ivan Zhekov]

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

[Sophie]

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.

[Ivan Zhekov]

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