RadComboBox Text cut off after selection (rbcInput)

[Ravi]

Hello, we just upgraded to the latest version of Telerik Web UI controls and we are experiencing text cut off issues with RadComboBox.

Currently we are using the 2013.2.717.35 Version of the Telerik.Web.UI dll.

The problem is when the user selects the value and the drop down closes; the text displayed in the combobox is truncated.
Following are the properties for the RadComboBox:

 <telerik:RadComboBox    ID="SpecialRadComboBox" 
                                        runat="server" 
                                        Skin="Office2007"
                                        AllowCustomText="False" 
                                        MarkFirstMatch="True" 
                                        ShowWhileLoading="True" 
                                        AppendDataBoundItems="True"
                                        Width="450px"
                                        DropDownWidth="450px"
                                        TabIndex="7"
                                        SelectAllTextEvent="None"
                                        onclientselectedindexchanged="ProcessInstructions">

CSS:

 .rcbInputCell INPUT.rcbInput
{
   cursor: default;     
}

div.RadComboBoxDropDown li
{
    white-space:nowrap;
    width:450px !important;
}

We tried this in firefox and it shows scroll bars and ignores the width set to the combobox. It resizes the RadComboBox 
to the length of the rcbInput.

IE8/10 - displays the combobox but truncates the text.

Please advice.
Thanks 

[Magdalena]

Hello Ravi,

I tried to reproduce the issue with the code you provided. Even after removing your custom stylesheet with the width (width:450px !important;) it seems OK. You can see the behavior in this video. Could you please provide some screenshots or more detailed explanation what is the exact issue that you are referring to?

Regards,
Magdalena
Telerik

[Ravi]

Hi Magdalena,

Yes, thats what been puzzling because we have looked into this and there was an issue with RadDecorators and that was fixed in the 2012 release of the Telerik controls.

I have attached the screenshots of the issue.

Following is the runtime code of the rcbinput where the text is being cut off.

Thank you

<TABLE style="BORDER-RIGHT-WIDTH: 0px; WIDTH: 100%; BORDER-COLLAPSE: collapse; BORDER-TOP-WIDTH: 0px; TABLE-LAYOUT: fixed; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" border=0 summary=combobox>
<TBODY>
<TR>
<TD style="MARGIN-TOP: -1px; WIDTH: 100%; MARGIN-BOTTOM: -1px" class="rcbInputCell rcbInputCellLeft"><INPUT style="DISPLAY: block" id=ctl00_Main_ctl00_WcssContainerTemplateControl1_ctl01_RequestNewServiceWizard1_ucPowerServiceStart_SpecialInstructionsRadComboBox_Input class="rcbInput radPreventDecorate" tabIndex=7 value="Buzz (unit) then knock on door (unit) for access customer home" type=text name=ctl00$Main$ctl00$WcssContainerTemplateControl1$ctl01$RequestNewServiceWizard1$ucPowerServiceStart$SpecialInstructionsRadComboBox autocomplete="off" jQuery19103827890447285688="9"></TD>
<TD style="MARGIN-TOP: -1px; MARGIN-BOTTOM: -1px" class="rcbArrowCell rcbArrowCellRight"><A style="POSITION: relative; OUTLINE-STYLE: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: medium; DISPLAY: block; OVERFLOW: hidden" id=ctl00_Main_ctl00_WcssContainerTemplateControl1_ctl01_RequestNewServiceWizard1_ucPowerServiceStart_SpecialInstructionsRadComboBox_Arrow>select</A></TD></TR></TBODY></TABLE><INPUT id=ctl00_Main_ctl00_WcssContainerTemplateControl1_ctl01_RequestNewServiceWizard1_ucPowerServiceStart_SpecialInstructionsRadComboBox_ClientState value='{"logEntries":[],"value":"Buzz (unit) then knock on door (unit) for access customer home","text":"Buzz (unit) then knock on door (unit) for access customer home","enabled":true,"checkedIndices":[],"checkedItemsTextOverflows":false}' type=hidden name=ctl00_Main_ctl00_WcssContainerTemplateControl1_ctl01_RequestNewServiceWizard1_ucPowerServiceStart_SpecialInstructionsRadComboBox_ClientState autocomplete="off">

[Magdalena]

Hello Ravi,

Thank you for additional resources you provided.

There is a missing parent tag with the class .RadComboBox in the code snippet you sent me so the property  width: 100%  doesn't apply to the .rcbInput because the selector is following

.RadComboBox .rcbInput {
    width: 100%;
}

So to add this property you can apply the following stylesheet

.rcbInput {
    width: 100%;
}

However to better solving the issue I would kindly ask you to send me a runnable project with a server markup where the issue is reproduced to see why the property of the width is not applied in your project.

I look forward to your reply.
 
Regards,
Magdalena
Telerik

[Ravi]

Hello Magdalena,

As suggested we added the parent tag with the .RadComboBox but it did not work.

But it led us to the root of the issue; the width of the rcb INPUT is being overridden by one of our base css file. This did not happen in the 2012.1.215.35, currently we are running on the latest 2013.2.717.35

Did the Telerik CSS class or file registrations change between these two versions that is causing this?
It seems like something in the new dll is letting our css take over the rcbInput whereas the old one took priority.

Following is the code generated in 2012.1.215.35 for rcbInputCell ... we have made no code changes.

<input name="ctl00$Main$ctl00$WcssContainerTemplateControl1$ctl01$RequestNewServiceWizard1$ucPowerServiceStart$SpecialInstructionsRadComboBox"
tabIndex="7"
class="rcbInput" id="ctl00_Main_ctl00_WcssContainerTemplateControl1_ctl01_RequestNewServiceWizard1_ucPowerServiceStart_SpecialInstructionsRadComboBox_Input"
style="display: block;"
type="text"
_events="[object Object]"
Validators="[object HTMLSpanElement]"
autocomplete="off"
jQuery17106426481136737433="32"
value="Buzz (unit) then knock on door (unit) for access customer home"/>

Following is the code generated in 2013.2.717.35 for rcbInputCell ... we have made no code changes.

<input name="ctl00$Main$ctl00$WcssContainerTemplateControl1$ctl01$RequestNewServiceWizard1$ucPowerServiceStart$SpecialInstructionsRadComboBox"
tabIndex="7"
class="rcbInput radPreventDecorate" id="ctl00_Main_ctl00_WcssContainerTemplateControl1_ctl01_RequestNewServiceWizard1_ucPowerServiceStart_SpecialInstructionsRadComboBox_Input"
style="display: block;"
type="text"
_events="[object Object]"
Validators="[object HTMLSpanElement]"
autocomplete="off"
jQuery19106290031392221071="9"
value="Buzz (unit) then knock on door (unit) for access customer home"/>

I have attached the screenshots of the css override for both versions.

[Magdalena]

Hello Ravi,

Thank you for getting back.

I am glad that you succeeded to find the custom selector that overwrite the inbuilt styles. The selector for the input width of the RadComboBox was changer from .radComboBox .rcbInputCell .rcbInputCell to .radComboBox .rcbInputCell  in the version 2012.2.724 . Please, apply following stylesheet to solve this issue

.radComboBox .rcbInputCell .rcbInputCell {
    width: 100%;
}

Do not hesitate to contact me if you have other questions.

Regards,
Magdalena
Telerik

[Ravi]

Hi Magdalena,

Thank you for the suggestion, I have applied the code in our base CSS where all the Telerik overrides are and it didn't work.

I have tried other ways of overriding our CSS (even included the !important) tag in the rcbInput Width option, it doesnt seem to have any impact on that rcbInput.

[Magdalena]

Hi Ravi,

I am not quite sure what styles are applied at your side so could you please send me a runnable project where the issue is reproduced. This will help me to investigate the problem deeper and find a solution faster. In the blog post "Isolating a problem in a sample project" you can find the detailed process how to isolate the project.

I look forward to your reply.

Regards,
Magdalena
Telerik

[Ravi]

Hi Magdalena,

Sorry for the late reply.

We just started rendering the RadComboBox to "NATIVE" instead of classic or lightweight. This way its a simple drop down box and none of our CSS interferes with it.

Currently we don't have the free cycles to keep chasing this as we have encountered few more issues in our applications with RadComboBox (See attached screenshot). We have the render the page in compatibility mode for these controls to work properly.

First, since the upgrade these RadComboBoxes are .. well all over the place. (2013.2.717.35 radcombobox position ie 10.jpg)
I use a meta tag in aspx and ascx pages to render the pages in EmulateIE9 and it seems to render fine 2013.2.717.35 (radcombobox position ie 10 with ie9 standards.jpg). But with a problem as it is duplicating values in it.

Yes, we have the AppendDataBoundItems="true" and Binding the dataitems on every page load. This code never caused the duplicates in 2012.1.215.35 but it is in the 2013.2.717.35 along with width changing.

We are doing regression testing throughout the application to see if anything else is misbehaving since our upgrade to 2013.2.717.35

Thank you

[Kate]

Hello Ravi,

Can you please provide more details on your scenario, for example providing the markup code of the RadComboBox that you are using would be very useful? Thus we can test the issue from our side as well and assist you in the most efficient way. Can you also clarify the exact steps for replication the behavior that you get?

Regards,
Kate
Telerik