Does anyone know if this layout still exists?

4 posts, 1 answers
  1. Lex
    Lex avatar
    9 posts
    Member since:
    Mar 2014

    Posted 13 Mar 2014 Link to this post

    I'm currently upgrading Telerik for our company, however it looks like the combo box layout that we used to use isn't there anymore.

    I was hoping we would have the images that were used here, however it looks like we are missing those.

    Attached is a screenshot of the combobox that we are using.
  2.
  3. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Mar 2014 in reply to Lex Link to this post

    Hi Lex,

    Please have a look into the sample code snippet which works fine at my end. Please provide your full code with CSS that I can reproduce the issue at my end for further help.

    ASPX:
    <telerik:RadComboBox ID="RadComboBox1" runat="server">
        <Items>
            <telerik:RadComboBoxItem Text="Item1" />
            <telerik:RadComboBoxItem Text="Item2" />
        </Items>
    </telerik:RadComboBox>

    Thanks,
    Shinu.
  5. Lex
    Lex avatar
    9 posts
    Member since:
    Mar 2014

    Posted 14 Mar 2014 in reply to Shinu Link to this post

    Please see my css below. I'm currently using the default skin of the latest version.

    .RadComboBox_newSkin {
       color: #333333;
       font: normal 12px "Segoe UI", Arial, Helvetica, sans-serif;
       line-height: 16px;
    }
     
       .RadComboBox_newSkin .rcbInputCell,
       .RadComboBox_newSkin .rcbArrowCell {
          background-image: url('<%=WebResource("TelerikCustomSkins.newSkin.ComboBox.rcbSprite.png")%>');
          _background-image: url('<%=WebResource("TelerikCustomSkins.newSkin.ComboBox.rcbSpriteIE6.png")%>');
       }
     
       .RadComboBox_newSkin .rcbInputCellLeft {
          background-position: 0 0;
       }
     
       .RadComboBox_newSkin .rcbInputCellRight {
          background-position: 100% 0;
       }
     
       .RadComboBox_newSkin .rcbInput {
          color: #333333;
          font: normal 12px "Segoe UI", Arial, Helvetica, sans-serif;
          line-height: 16px;
       }
     
       .RadComboBox_newSkin .rcbEmptyMessage {
          font-style: italic;
          color: #8a8a8a;
       }
     
       .RadComboBox_newSkin .rcbArrowCellLeft {
          background-position: 0 -176px;
       }
     
       .RadComboBox_newSkin .rcbArrowCellRight {
          background-position: -18px -176px;
       }
     
       .RadComboBox_newSkin .rcbArrowCellLeft.rcbArrowCellHidden {
          background-position: 0 0;
       }
     
       .RadComboBox_newSkin .rcbArrowCellRight.rcbArrowCellHidden {
          background-position: 100% 0;
       }
     
       .RadComboBox_newSkin .rcbHovered .rcbInputCellLeft {
          background-position: 0 -22px;
       }
     
       .RadComboBox_newSkin .rcbHovered .rcbInputCellRight {
          background-position: 100% -22px;
       }
     
       .RadComboBox_newSkin .rcbHovered .rcbInput {
          color: black;
       }
     
       .RadComboBox_newSkin .rcbHovered .rcbArrowCellLeft {
          background-position: -36px -176px;
       }
     
       .RadComboBox_newSkin .rcbHovered .rcbArrowCellRight {
          background-position: -54px -176px;
       }
     
       .RadComboBox_newSkin .rcbHovered .rcbArrowCellLeft.rcbArrowCellHidden {
          background-position: 0 -22px;
       }
     
       .RadComboBox_newSkin .rcbHovered .rcbArrowCellRight.rcbArrowCellHidden {
          background-position: 100% -22px;
       }
     
       .RadComboBox_newSkin .rcbFocused .rcbInputCellLeft {
          background-position: 0 -44px;
       }
     
       .RadComboBox_newSkin .rcbFocused .rcbInputCellRight {
          background-position: 100% -44px;
       }
     
       .RadComboBox_newSkin .rcbFocused .rcbInput {
          color: black;
       }
     
       .RadComboBox_newSkin .rcbFocused .rcbArrowCellLeft {
          background-position: -72px -176px;
       }
     
       .RadComboBox_newSkin .rcbFocused .rcbArrowCellRight {
          background-position: -90px -176px;
       }
     
       .RadComboBox_newSkin .rcbFocused .rcbArrowCellLeft.rcbArrowCellHidden {
          background-position: 0 -44px;
       }
     
       .RadComboBox_newSkin .rcbFocused .rcbArrowCellRight.rcbArrowCellHidden {
          background-position: 100% -44px;
       }
     
       .RadComboBox_newSkin .rcbDisabled .rcbInputCellLeft {
          background-position: 0 -66px;
       }
     
       .RadComboBox_newSkin .rcbDisabled .rcbInputCellRight {
          background-position: 100% -66px;
       }
     
       .RadComboBox_newSkin .rcbDisabled .rcbInput {
          color: #a5a5a5;
       }
     
       .RadComboBox_newSkin .rcbDisabled .rcbArrowCellLeft {
          background-position: -108px -176px;
       }
     
       .RadComboBox_newSkin .rcbDisabled .rcbArrowCellRight {
          background-position: -126px -176px;
       }
     
       .RadComboBox_newSkin .rcbDisabled .rcbArrowCellLeft.rcbArrowCellHidden {
          background-position: 0 -66px;
       }
     
       .RadComboBox_newSkin .rcbDisabled .rcbArrowCellRight.rcbArrowCellHidden {
          background-position: 100% -66px;
       }
     
       .RadComboBox_newSkin .rcbReadOnly .rcbInputCellLeft {
          background-position: 0 -88px;
       }
     
       .RadComboBox_newSkin .rcbReadOnly .rcbInputCellRight {
          background-position: 100% -88px;
       }
     
       .RadComboBox_newSkin .rcbReadOnly .rcbInput {
          color: #333333;
       }
     
       .RadComboBox_newSkin .rcbReadOnly .rcbArrowCellLeft {
          background-position: -144px -176px;
       }
     
       .RadComboBox_newSkin .rcbReadOnly .rcbArrowCellRight {
          background-position: -162px -176px;
       }
     
       .RadComboBox_newSkin .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden {
          background-position: 0 -88px;
       }
     
       .RadComboBox_newSkin .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden {
          background-position: 100% -88px;
       }
     
       .RadComboBox_newSkin .rcbHovered .rcbReadOnly .rcbInputCellLeft {
          background-position: 0 -110px;
       }
     
       .RadComboBox_newSkin .rcbHovered .rcbReadOnly .rcbInputCellRight {
          background-position: 100% -110px;
       }
     
       .RadComboBox_newSkin .rcbHovered .rcbReadOnly .rcbInput {
          color: black;
       }
     
       .RadComboBox_newSkin .rcbHovered .rcbReadOnly .rcbArrowCellLeft {
          background-position: -180px -176px;
       }
     
       .RadComboBox_newSkin .rcbHovered .rcbReadOnly .rcbArrowCellRight {
          background-position: -198px -176px;
       }
     
       .RadComboBox_newSkin .rcbHovered .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden {
          background-position: 0 -110px;
       }
     
       .RadComboBox_newSkin .rcbHovered .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden {
          background-position: 100% -110px;
       }
     
       .RadComboBox_newSkin .rcbFocused .rcbReadOnly .rcbInputCellLeft {
          background-position: 0 -132px;
       }
     
       .RadComboBox_newSkin .rcbFocused .rcbReadOnly .rcbInputCellRight {
          background-position: 100% -132px;
       }
     
       .RadComboBox_newSkin .rcbFocused .rcbReadOnly .rcbInput {
          color: black;
       }
     
       .RadComboBox_newSkin .rcbFocused .rcbReadOnly .rcbArrowCellLeft {
          background-position: -216px -176px;
       }
     
       .RadComboBox_newSkin .rcbFocused .rcbReadOnly .rcbArrowCellRight {
          background-position: -234px -176px;
       }
     
       .RadComboBox_newSkin .rcbFocused .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden {
          background-position: 0 -132px;
       }
     
       .RadComboBox_newSkin .rcbFocused .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden {
          background-position: 100% -132px;
       }
     
       .RadComboBox_newSkin .rcbDisabled .rcbReadOnly .rcbInputCellLeft {
          background-position: 0 -154px;
       }
     
       .RadComboBox_newSkin .rcbDisabled .rcbReadOnly .rcbInputCellRight {
          background-position: 100% -154px;
       }
     
       .RadComboBox_newSkin .rcbDisabled .rcbReadOnly .rcbInput {
          color: #a5a5a5;
       }
     
       .RadComboBox_newSkin .rcbDisabled .rcbReadOnly .rcbArrowCellLeft {
          background-position: -252px -176px;
       }
     
       .RadComboBox_newSkin .rcbDisabled .rcbReadOnly .rcbArrowCellRight {
          background-position: -270px -176px;
       }
     
       .RadComboBox_newSkin .rcbDisabled .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden {
          background-position: 0 -154px;
       }
     
       .RadComboBox_newSkin .rcbDisabled .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden {
          background-position: 100% -154px;
       }
     
    .RadComboBoxDropDown_newSkin {
       border-color: #8a8a8a;
       color: #333333;
       background: white;
       font: normal 12px "Segoe UI", Arial, Helvetica, sans-serif;
       line-height: 16px;
    }
     
       .RadComboBoxDropDown_newSkin .rcbHeader,
       .RadComboBoxDropDown_newSkin .rcbFooter {
          color: #333333;
          background-color: #eaeaea;
          background-image: url('<%=WebResource("TelerikCustomSkins.newSkin.ComboBox.rcbSprite.png")%>');
          _background-image: url('<%=WebResource("TelerikCustomSkins.newSkin.ComboBox.rcbSpriteIE6.png")%>');
          background-position: 0 -500px;
       }
     
       .RadComboBoxDropDown_newSkin .rcbHeader {
          border-bottom-color: #8a8a8a;
       }
     
       .RadComboBoxDropDown_newSkin .rcbFooter {
          border-top-color: #8a8a8a;
       }
     
       .RadComboBoxDropDown_newSkin .rcbHovered {
          color: black;
          background: #dfdfdf;
       }
     
       .RadComboBoxDropDown_newSkin .rcbDisabled {
          color: #a5a5a5;
          background-color: transparent;
       }
     
       .RadComboBoxDropDown_newSkin .rcbLoading {
          color: black;
          background: #dfdfdf;
       }
     
       .RadComboBoxDropDown_newSkin .rcbItem em,
       .RadComboBoxDropDown_newSkin .rcbHovered em {
          color: black;
          background: #dfdfdf;
       }
     
       .RadComboBoxDropDown_newSkin .rcbCheckAllItems {
          color: #333333;
          background-color: #eaeaea;
       }
     
       .RadComboBoxDropDown_newSkin .rcbCheckAllItemsHovered {
          color: #333333;
          background-color: #eaeaea;
       }
     
       .RadComboBoxDropDown_newSkin .rcbMoreResults {
          border-top-color: #8a8a8a;
          color: #333333;
          background-color: #eaeaea;
          background-position: 0 -500px;
          background-image: url('<%=WebResource("TelerikCustomSkins.newSkin.ComboBox.rcbSprite.png")%>');
          _background-image: url('<%=WebResource("TelerikCustomSkins.newSkin.ComboBox.rcbSpriteIE6.png")%>');
       }
     
          .RadComboBoxDropDown_newSkin .rcbMoreResults a {
             background-image: url('<%=WebResource("TelerikCustomSkins.newSkin.ComboBox.rcbSprite.png")%>');
             _background-image: url('<%=WebResource("TelerikCustomSkins.newSkin.ComboBox.rcbSpriteIE6.png")%>');
             background-position: -308px -181px;
          }
     
       .RadComboBoxDropDown_newSkin .rcbSeparator {
          color: #ffffff;
          background: #8a8a8a;
       }
  7. Answer
    Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 17 Mar 2014 Link to this post

    Hi Lex,

    I have tested the CSS code that you have provided. The background positions that are in the CSS that you have provided are set for the sprite radFormSprite.png instead of the rcbSprite.png. Here is the video of the testing and resolving the issue for your reference. If the problem persists, please, make sure that the URLs are correct and the sprite is loaded (I have attached the screenshot for your reference). Please find the radFormSprite.png in the attachment.


    Regards,
    Magdalena
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  8.
Back to Top