radComboBox with layout problem

[Marcelo de Castro Martinez]

Hi,
I recently updated the version 2011 to 2017, but the radComboBox object I have on my pages has been unconfigured, as I show in the attached image.

Please help me on this issue.

Thank you.

 

Html:
<div id="ctl00_ctl00_placeHolderMain_mainWebCad_frmMoeda_cmbPais" class="RadComboBox RadComboBox_Default" style="width:160px;white-space:normal;">
<table summary="combobox" style="border-width:0;border-collapse:collapse;width:100%">
<tbody><tr class="rcbReadOnly">
<td class="rcbInputCell rcbInputCellLeft" style="width:100%;"><input name="ctl00$ctl00$placeHolderMain$mainWebCad$frmMoeda$cmbPais" type="text" class="rcbInput radPreventDecorate" id="ctl00_ctl00_placeHolderMain_mainWebCad_frmMoeda_cmbPais_Input" value="-Selecione uma opção-" readonly="readonly" autocomplete="off"></td><td class="rcbArrowCell rcbArrowCellRight"><a id="ctl00_ctl00_placeHolderMain_mainWebCad_frmMoeda_cmbPais_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a></td>
</tr>
</tbody></table><input id="ctl00_ctl00_placeHolderMain_mainWebCad_frmMoeda_cmbPais_ClientState" name="ctl00_ctl00_placeHolderMain_mainWebCad_frmMoeda_cmbPais_ClientState" type="hidden" autocomplete="off">
</div>

 

 

CSS:

.RadComboBox_Default .rcbInputCellLeft {
    background-image: url("/Hotsite/Content/Images/forms/telerikComboCMFlex.png") !important;
}

.RadComboBox_Default .rcbInputCellRight {
    background-image: url("/Hotsite/Content/Images/forms/telerikComboCMFlex.png") !important;
}

.RadComboBox_Default .rcbArrowCellLeft {
    background-image: url("/Hotsite/Content/Images/forms/telerikComboCMFlex.png") !important;
}

.RadComboBox_Default .rcbArrowCellRight {
    background-image: url("/Hotsite/Content/Images/forms/telerikComboCMFlex.png") !important;
}

.RadComboBox table td.rcbInputCell {
    height: 29px !important;
}

.RadComboBox table td.rcbInputCell {
    width: 100% !important;
    padding-left: 2px !important;
}

.RadComboBox .rcbInputCell .rcbInput {
    width: 100% !important;
    padding-left: 2px !important;
}

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

.RadComboBox .rcbHovered .rcbInput {
    width: 95% !important;
}

.RadComboBox .rcbFocused .rcbInput {
    width: 95% !important;
}

.RadComboBox .rcbDisabled .rcbInput {
    width: 95% !important;
}

.RadComboBox_Default .rcbHovered .rcbReadOnly td.rcbInputCellLeft {
    background-position: 0px -32px !important;
}

.RadComboBox_Default .rcbFocused .rcbReadOnly td.rcbInputCellLeft {
    background-position: 0px -64px !important;
}

.RadComboBox_Default .rcbDisabled .rcbReadOnly td.rcbInputCellLeft {
    background-position: 0px -64px !important;
}

.RadComboBox_Default .rcbReadOnly td.rcbArrowCellRight {
    background-position: -4px -96px !important;
}

.RadComboBox_Default .rcbHovered .rcbReadOnly .rcbArrowCellRight {
    background-position: -64px -96px !important;
}

.RadComboBox_Default .rcbFocused .rcbReadOnly .rcbArrowCellRight {
    background-position: -125px -96px !important;
}

.RadComboBox_Default .rcbDisabled .rcbReadOnly td.rcbArrowCellRight {
    background-position: -125px -96px !important;
}

.RadComboBox .rcbReadOnly td.rcbArrowCell a {
    width: 18px !important;
}

.RadComboBox .rcbReadOnly td.rcbArrowCell {
    width: 18px !important;
}

.RadComboBox_Default td.rcbArrowCellRight {
    background-position: -2px -108px !important;
}

[Vessy]

Hi Marcelo,

The default rendering mode in the 2017 versions of the controls is Lightweight, which I assume is the reason for the experienced issue as your styles back in 2011 were targeting Classic rendering.

Please, add the following configuration in the web.config of your application and see whether forcing the classic rendering will resolve the problem:

<appSettings>
    <add key="Telerik.Web.UI.RenderMode" value="lightweight" />
</appSettings>

Regards,
Vessy
Progress Telerik