radComboBox with layout problem

2 posts, 0 answers
  1. Marcelo de Castro Martinez
    Marcelo de Castro Martinez avatar
    1 posts
    Member since:
    May 2003

    Posted 08 Sep 2017 Link to this post

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

  2. Vessy
    Admin
    Vessy avatar
    2212 posts

    Posted 14 Sep 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top