Combo Style

5 posts, 0 answers
  1. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 19 May 2014 Link to this post

    My combobox shows a background color and I am not able to figure out how to show a white background.
    I also tried building a new style using the stylebuilder. It showed a white background when I was building it but wehn I used it in my website it came up with a gray background.

    I want the combo to look like the first dropdown in the attached image (that is using an asp.net dropdownlist)

    .RadComboBox_WebBlue
    {
        color: #333;
        font: normal 12px "Segoe UI" ,Arial,Helvetica,sans-serif;
        line-height: 16px;
    }
    .RadComboBox_WebBlue .rcbInputCell, .RadComboBox_WebBlue .rcbArrowCell
    {
        background-image: url('ComboBox/radFormSprite.png');
        _background-image: url('ComboBox/radFormSpriteIE6.png');
    }
    .RadComboBox_WebBlue .rcbInputCellLeft
    {
        background-position: 0 0;
    }
    .RadComboBox_WebBlue .rcbInputCellRight
    {
        background-position: 100% 0;
    }
    .RadComboBox_WebBlue .rcbInput
    {
        color: #333;
        font: normal 12px "Segoe UI" ,Arial,Helvetica,sans-serif;
        line-height: 16px;
    }
    .RadComboBox_WebBlue .rcbEmptyMessage
    {
        font-style: italic;
        color: #8a8a8a;
    }
    .RadComboBox_WebBlue .rcbArrowCellLeft
    {
        background-position: 0 -176px;
    }
    .RadComboBox_WebBlue .rcbArrowCellRight
    {
        background-position: -18px -176px;
    }
    .RadComboBox_WebBlue .rcbArrowCellLeft.rcbArrowCellHidden
    {
        background-position: 0 0;
    }
    .RadComboBox_WebBlue .rcbArrowCellRight.rcbArrowCellHidden
    {
        background-position: 100% 0;
    }
    .RadComboBox_WebBlue .rcbHovered .rcbInputCellLeft
    {
        background-position: 0 -22px;
    }
    .RadComboBox_WebBlue .rcbHovered .rcbInputCellRight
    {
        background-position: 100% -22px;
    }
    .RadComboBox_WebBlue .rcbHovered .rcbInput
    {
        color: black;
    }
    .RadComboBox_WebBlue .rcbHovered .rcbArrowCellLeft
    {
        background-position: -36px -176px;
    }
    .RadComboBox_WebBlue .rcbHovered .rcbArrowCellRight
    {
        background-position: -54px -176px;
    }
    .RadComboBox_WebBlue .rcbHovered .rcbArrowCellLeft.rcbArrowCellHidden
    {
        background-position: 0 -22px;
    }
    .RadComboBox_WebBlue .rcbHovered .rcbArrowCellRight.rcbArrowCellHidden
    {
        background-position: 100% -22px;
    }
    .RadComboBox_WebBlue .rcbFocused .rcbInputCellLeft
    {
        background-position: 0 -44px;
    }
    .RadComboBox_WebBlue .rcbFocused .rcbInputCellRight
    {
        background-position: 100% -44px;
    }
    .RadComboBox_WebBlue .rcbFocused .rcbInput
    {
        color: black;
    }
    .RadComboBox_WebBlue .rcbFocused .rcbArrowCellLeft
    {
        background-position: -72px -176px;
    }
    .RadComboBox_WebBlue .rcbFocused .rcbArrowCellRight
    {
        background-position: -90px -176px;
    }
    .RadComboBox_WebBlue .rcbFocused .rcbArrowCellLeft.rcbArrowCellHidden
    {
        background-position: 0 -44px;
    }
    .RadComboBox_WebBlue .rcbFocused .rcbArrowCellRight.rcbArrowCellHidden
    {
        background-position: 100% -44px;
    }
    .RadComboBox_WebBlue .rcbDisabled .rcbInputCellLeft
    {
        background-position: 0 -66px;
    }
    .RadComboBox_WebBlue .rcbDisabled .rcbInputCellRight
    {
        background-position: 100% -66px;
    }
    .RadComboBox_WebBlue .rcbDisabled .rcbInput
    {
        color: #a5a5a5;
    }
    .RadComboBox_WebBlue .rcbDisabled .rcbArrowCellLeft
    {
        background-position: -108px -176px;
    }
    .RadComboBox_WebBlue .rcbDisabled .rcbArrowCellRight
    {
        background-position: -126px -176px;
    }
    .RadComboBox_WebBlue .rcbDisabled .rcbArrowCellLeft.rcbArrowCellHidden
    {
        background-position: 0 -66px;
    }
    .RadComboBox_WebBlue .rcbDisabled .rcbArrowCellRight.rcbArrowCellHidden
    {
        background-position: 100% -66px;
    }
    .RadComboBox_WebBlue .rcbReadOnly .rcbInputCellLeft
    {
        background-position: 0 -88px;
    }
    .RadComboBox_WebBlue .rcbReadOnly .rcbInputCellRight
    {
        background-position: 100% -88px;
    }
    .RadComboBox_WebBlue .rcbReadOnly .rcbInput
    {
        color: #333;
    }
    .RadComboBox_WebBlue .rcbReadOnly .rcbArrowCellLeft
    {
        background-position: -144px -176px;
    }
    .RadComboBox_WebBlue .rcbReadOnly .rcbArrowCellRight
    {
        background-position: -162px -176px;
    }
    .RadComboBox_WebBlue .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden
    {
        background-position: 0 -88px;
    }
    .RadComboBox_WebBlue .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden
    {
        background-position: 100% -88px;
    }
    .RadComboBox_WebBlue .rcbHovered .rcbReadOnly .rcbInputCellLeft
    {
        background-position: 0 -110px;
    }
    .RadComboBox_WebBlue .rcbHovered .rcbReadOnly .rcbInputCellRight
    {
        background-position: 100% -110px;
    }
    .RadComboBox_WebBlue .rcbHovered .rcbReadOnly .rcbInput
    {
        color: black;
    }
    .RadComboBox_WebBlue .rcbHovered .rcbReadOnly .rcbArrowCellLeft
    {
        background-position: -180px -176px;
    }
    .RadComboBox_WebBlue .rcbHovered .rcbReadOnly .rcbArrowCellRight
    {
        background-position: -198px -176px;
    }
    .RadComboBox_WebBlue .rcbHovered .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden
    {
        background-position: 0 -110px;
    }
    .RadComboBox_WebBlue .rcbHovered .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden
    {
        background-position: 100% -110px;
    }
    .RadComboBox_WebBlue .rcbFocused .rcbReadOnly .rcbInputCellLeft
    {
        background-position: 0 -132px;
    }
    .RadComboBox_WebBlue .rcbFocused .rcbReadOnly .rcbInputCellRight
    {
        background-position: 100% -132px;
    }
    .RadComboBox_WebBlue .rcbFocused .rcbReadOnly .rcbInput
    {
        color: black;
    }
    .RadComboBox_WebBlue .rcbFocused .rcbReadOnly .rcbArrowCellLeft
    {
        background-position: -216px -176px;
    }
    .RadComboBox_WebBlue .rcbFocused .rcbReadOnly .rcbArrowCellRight
    {
        background-position: -234px -176px;
    }
    .RadComboBox_WebBlue .rcbFocused .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden
    {
        background-position: 0 -132px;
    }
    .RadComboBox_WebBlue .rcbFocused .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden
    {
        background-position: 100% -132px;
    }
    .RadComboBox_WebBlue .rcbDisabled .rcbReadOnly .rcbInputCellLeft
    {
        background-position: 0 -154px;
    }
    .RadComboBox_WebBlue .rcbDisabled .rcbReadOnly .rcbInputCellRight
    {
        background-position: 100% -154px;
    }
    .RadComboBox_WebBlue .rcbDisabled .rcbReadOnly .rcbInput
    {
        color: #a5a5a5;
    }
    .RadComboBox_WebBlue .rcbDisabled .rcbReadOnly .rcbArrowCellLeft
    {
        background-position: -252px -176px;
    }
    .RadComboBox_WebBlue .rcbDisabled .rcbReadOnly .rcbArrowCellRight
    {
        background-position: -270px -176px;
    }
    .RadComboBox_WebBlue .rcbDisabled .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden
    {
        background-position: 0 -154px;
    }
    .RadComboBox_WebBlue .rcbDisabled .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden
    {
        background-position: 100% -154px;
    }
    .RadComboBoxDropDown_WebBlue
    {
        border-color: #8a8a8a;
        color: #333;
        background: white;
        font: normal 12px "Segoe UI" ,Arial,Helvetica,sans-serif;
        line-height: 16px;
    }
    .RadComboBoxDropDown_WebBlue .rcbHeader, .RadComboBoxDropDown_WebBlue .rcbFooter
    {
        color: #333;
        background-color: #eaeaea;
        background-image: url('Common/radFormSprite.png');
        _background-image: url('Common/radFormSpriteIE6.png');
        background-position: 0 -500px;
    }
    .RadComboBoxDropDown_WebBlue .rcbHeader
    {
        border-bottom-color: #8a8a8a;
    }
    .RadComboBoxDropDown_WebBlue .rcbFooter
    {
        border-top-color: #8a8a8a;
    }
    .RadComboBoxDropDown_WebBlue .rcbHovered
    {
        color: black;
        background: #dfdfdf;
    }
    .RadComboBoxDropDown_WebBlue .rcbDisabled
    {
        color: #a5a5a5;
        background-color: transparent;
    }
    .RadComboBoxDropDown_WebBlue .rcbLoading
    {
        color: black;
        background: #dfdfdf;
    }
    .RadComboBoxDropDown_WebBlue .rcbItem em, .RadComboBoxDropDown_WebBlue .rcbHovered em
    {
        color: black;
        background: #dfdfdf;
    }
    .RadComboBoxDropDown_WebBlue .rcbCheckAllItems
    {
        color: #333;
        background-color: #eaeaea;
    }
    .RadComboBoxDropDown_WebBlue .rcbCheckAllItemsHovered
    {
        color: #333;
        background-color: #eaeaea;
    }
    .RadComboBoxDropDown_WebBlue .rcbMoreResults
    {
        border-top-color: #8a8a8a;
        color: #333;
        background-color: #eaeaea;
        background-position: 0 -500px;
        background-image: url('Common/radFormSprite.png');
        _background-image: url('Common/radFormSpriteIE6.png');
    }
    .RadComboBoxDropDown_WebBlue .rcbMoreResults a
    {
        background-image: url('ComboBox/radFormSprite.png');
        _background-image: url('ComboBox/radFormSpriteIE6.png');
        background-position: -308px -181px;
    }
    .RadComboBoxDropDown_WebBlue .rcbSeparator
    {
        color: #fff;
        background: #8a8a8a;
    }
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 May 2014 in reply to MBEN Link to this post

    Hi MBEN,

    Please try the following CSS code snippet which works fine at my end.

    CSS:
    <style type="text/css">
        .RadComboBox_WebBlue .rcbFocused .rcbReadOnly .rcbInputCellLeft
        {
            border-radius: 1px !important;
            background-image: none !important;
            border: 1px solid black !important;
        }
    </style>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 20 May 2014 in reply to Shinu Link to this post

    That did not work.
    I had to do this to make it work:


    .RadComboBox_WebBlue .rcbInputCell
    {
        background-image: none !important;
        border: 1px solid #A4A4A4 !important;
    }
     .RadComboBox_WebBlue .rcbArrowCell
    {
        background-image: url('ComboBox/radFormSprite.png');
        _background-image: url('ComboBox/radFormSpriteIE6.png');
        border: 1px solid #8a8a8a !important;
    }

    However, my arrow cell looks a little disconnected from the combo. I am not sure how to fix that.
    Attached image shows how it has a little soft padding around. I am trying to achieve the look in the dropdownlist above it that fits the arrow cell properly withing the boundaries.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 21 May 2014 in reply to MBEN Link to this post

    Hi MBEN,

    Please add the following CSS along with your CSS which works fine at my end.

    CSS:
    .RadComboBox .rcbArrowCell a
    {
        width: 17px !important;
        height : 17px !important;
    }

    Thanks,
    Shinu.
  6. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 21 May 2014 in reply to Shinu Link to this post

    That works fine. Thanks!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017