[Solved] RadComboBox Text Wrapping

[Rae Crusoe]

We just upgraded to the ASPNET AJAX Q1 2009 Controls and now our RadComboBoxes are wrapping text not on spaces (like they did before the upgrade), but are wrapping on whatever letter happens to be at the end of the row (as determined by the width set on the RadComboBox). 

For example, the first line is: "Adjust Current Year Excess/Revoked Contribut"
2nd line (wrapped text from above line is) "ions"

Is there a setting we can use that will wrap text on a space instead of in the middle of a word?

[Simon]

Hi Rae Crusoe,

In which browser are you experiencing the issue?

Please try setting the NoWrap property of the ComboBox to false and let me know whether this works.

Best wishes,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Rae Crusoe]

We are experiencing this in IE7. The wrapping works like it should in IE8 and the latest version of FireFox.

Setting the nowrap property to false had no effect in IE7.

[Zoran]

I am also experiencing this problem with RadComboBox in IE7. 

This can be seen in Telerik's Multi-column ComboBox Example where wrapping of the longer items at the end of the list is incorrect.

[Simon]

Hello Zoran,

Indeed the issue is observable in the online example.

Please use the workaround below to fix the issue for now. We will continue investigating whether and how it could be fixed permanently in the control.

* html .RadComboBoxDropDown .col1, /* IE6 & quirks */
* html .RadComboBoxDropDown .col2,
* html .RadComboBoxDropDown .col3
{
    word-break: keep-all;
}

*+html .RadComboBoxDropDown .col1, /* IE7 */
*+html .RadComboBoxDropDown .col2,
*+html .RadComboBoxDropDown .col3
{
    word-break: keep-all;
}

Greetings,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Rae Crusoe]

The fix for our implementation of the RadComboBox is:

*html .RadComboBoxDropDown .rcbItem /* IE6 & quirks */
{
word-break: keep-all !important;
}

*+html .RadComboBoxDropDown .rcbItem /* IE7 */
{
word-break: keep-all !important;
}

 

 

[Zoran]

Thank you!

[Ryan]

It was also happening when you would hover over the item in the list.  Adding rcbHovered seemed to fix it for us.

 

*html .RadComboBoxDropDown .rcbItem,
*html .RadComboBoxDropDown .rcbHovered
 /* IE6 & quirks */
{
    word-break: keep-all !important;
}

*+html .RadComboBoxDropDown .rcbItem,
*+html .RadComboBoxDropDown .rcbHovered /* IE7 */
{
    word-break: keep-all !important;
}

 

 

 

 

[Rory]

The last one worked for me in IE7. However when my line breaks over it is floating on top of the next line item. Making it totally unreadable for the Item below the wrapped item. Any Suggestions?

The issue is coming from the Skin File.

When I add this to my skin file the wrapping breaks. Please help.

<telerik:RadComboBox runat="server"
    Skin="WebBlue">
</telerik:RadComboBox>

 

 

[Rory]

Ok one more piece of info. The combo box is on a TabStrip / MultiPage that uses RenderSelectedPageOnly="True"; and the busted combobox isn't on Tab 1. The combo boxes on Tab 1 wrap normally. The combo boxes on Tab 1+x don't wrap correctly.
Please Help.

[Kamachi]

Do we have a solution for this?

[Rory]

there are 2 problems mentioned in this thread.

Problem 1) Comboboxes wrap in the middle of your word.
Solution by Ryan worked for me. 

Problem 2) In Ajax rendered or rerendered pages the wrapping style is broken so that the items wrap and float over the items beneath them.
Solution for me was to remove the Skin references from my SkinFile.

[Kamachi Ravichandran]

Thanks Rory.