+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Combobox Styling Issue

Combobox Styling Issue

2 posts, 0 answered
  1. Neil
    Neil avatar
    30 posts
    Registered:
    20 Jan 2009
    13 Nov 2010
    Link to this post
    Hi All, I'm hoping somebody can take a quick look here and tell me which css element is causing my problem? I've attached a screenshot of it in action, but in case it does not attach properly, the border around an item in the dropdown when you are hovering over it is bright green. I tried changing the:

    .RadComboBox_MySkin .rcbFocused .rcbReadOnly .rcbArrowCellHidden { background-color: #17ff17; }

    as its hex colour is green, but there was no change in the behaviour? Sorry I do not have this site up live for you to see it in action. Thanks in advance for your help!



    /* RadComboBox Simple skin */

    /*global*/

    .RadComboBox_MySkin,
    .RadComboBox_MySkin .rcbInput,
    .RadComboBoxDropDown_MySkin
    {
    font: 12px "Segoe UI", Arial, sans-serif;
    color: #333333;
    }

    /* combobox */

    div.RadComboBox_MySkin table td.rcbInputCell
    {
    height: 23px;
    width:125px;
    line-height: 23px;
    border: style #616161;
    background: white;
    }
    * html div.RadComboBox_MySkin table td.rcbInputCell
    {
    height /**/: 19px;
    line-height /**/: 19px;
    }

    div.RadComboBox_MySkin table td.rcbInputCellLeft { border-width: 1px 0 1px 1px; }
    div.RadComboBox_MySkin table td.rcbInputCellRight { border-width: 1px 1px 1px 0; }

    * html div.RadComboBox_MySkin .rcbInputCell .rcbInput
    {
    height /**/: 16px;
    padding /**/: 2px 0; /* This should fix the ajax introduced height in IE7 and not break IE6 */
    }

    .RadComboBox_MySkin .rcbInputCell .rcbEmptyMessage
    {
    color: #666666;
    }

    .RadComboBox_MySkin .rcbHovered .rcbInputCell .rcbInput,
    .RadComboBox_MySkin .rcbFocused .rcbInputCell .rcbInput { color: Blue; }

    div.RadComboBox_MySkin table td.rcbArrowCell
    {
    border: 1px solid #616161;
    background: #ffffff url('DropArrow.png') no-repeat -1px 50%;
    }

    div.RadComboBox_MySkin .rcbReadOnly .rcbArrowCellLeft,
    div.RadComboBox_MySkin .rcbArrowCellHidden.rcbArrowCellLeft { border-width: 1px 0 1px 1px; }
    div.RadComboBox_MySkin .rcbReadOnly .rcbArrowCellRight,
    div.RadComboBox_MySkin .rcbArrowCellHidden.rcbArrowCellRight { border-width: 1px 1px 1px 0; }

    .RadComboBox_MySkin td.rcbArrowCell { background-position: -1px 50%; }
    .RadComboBox_MySkin .rcbHovered .rcbArrowCell { background-position: -1px 50%; }
    .RadComboBox_MySkin .rcbFocused .rcbArrowCell { background-position: -1px 50%; }
    .RadComboBox_MySkin .rcbDisabled .rcbArrowCell { background-position: -1px 50%; }
    .RadComboBox_MySkin .rcbDisabled .rcbArrowCell { background-position: -1px 50%; }
    /*
    .RadComboBox_MySkin .rcbHovered .rcbArrowCell { background-position: -21px 50%; }

    .RadComboBox_MySkin .rcbFocused .rcbArrowCell { background-position: -41px 50%; }
    .RadComboBox_MySkin .rcbDisabled .rcbArrowCell { background-position: -61px 50%; }
    */

    .RadComboBox_MySkin .rcbReadOnly td.rcbArrowCell { background-position: -2px 50%; }
    .RadComboBox_MySkin .rcbHovered .rcbReadOnly .rcbArrowCell { background-position: -2px 50%; }
    .RadComboBox_MySkin .rcbFocused .rcbReadOnly .rcbArrowCell { background-position: -2px 50%; }

    .RadComboBox_MySkin .rcbDisabled .rcbReadOnly .rcbArrowCell { background-position: -2px 50%; }

    /*
    .RadComboBox_MySkin .rcbFocused .rcbReadOnly .rcbArrowCell { background-position: -42px 50%; }
    .RadComboBox_MySkin .rcbHovered .rcbReadOnly .rcbArrowCell { background-position: -22px 50%; }
    .RadComboBox_MySkin .rcbDisabled .rcbReadOnly .rcbArrowCell { background-position: -62px 50%; }
    */

    .RadComboBox_MySkin td.rcbArrowCellHidden,
    .RadComboBox_MySkin .rcbHovered td.rcbArrowCellHidden,
    .RadComboBox_MySkin .rcbFocused td.rcbArrowCellHidden,
    .RadComboBox_MySkin .rcbReadOnly td.rcbArrowCellHidden,
    .RadComboBox_MySkin .rcbHovered .rcbReadOnly .rcbArrowCellHidden,
    .RadComboBox_MySkin .rcbFocused .rcbReadOnly .rcbArrowCellHidden,
    .RadComboBox_MySkin .rcbDisabled .rcbReadOnly .rcbArrowCellHidden,
    .RadComboBox_MySkin table.rcbDisabled td.rcbArrowCellHidden { background: none; }


    .RadComboBox_MySkin .rcbHovered .rcbArrowCell,
    .RadComboBox_MySkin .rcbHovered .rcbReadOnly .rcbInputCell, 
    .RadComboBox_MySkin .rcbHovered .rcbReadOnly .rcbArrowCellHidden { background-color: white; }
    .RadComboBox_MySkin .rcbFocused .rcbArrowCell,
    .RadComboBox_MySkin .rcbFocused .rcbReadOnly .rcbInputCell,  { background-color: white; }
    .RadComboBox_MySkin .rcbFocused .rcbReadOnly .rcbArrowCellHidden { background-color: #17ff17; }

    div.RadComboBox_MySkin .rcbHovered .rcbArrowCell,
    div.RadComboBox_MySkin .rcbHovered .rcbInputCell { border-color: #616161; }
    div.RadComboBox_MySkin .rcbFocused .rcbArrowCell,
    div.RadComboBox_MySkin .rcbFocused .rcbInputCell { border-color: #616161; }
    div.RadComboBox_MySkin .rcbDisabled .rcbArrowCell,
    div.RadComboBox_MySkin .rcbDisabled .rcbInputCell { border-color: #b0b0b0; }

    div.RadComboBox_MySkin .rcbArrowCell a
    {
    height: 20px;
    }

    div.RadComboBox_MySkin td.rcbArrowCellHidden,
    div.RadComboBox_MySkin .rcbArrowCellHidden a
    {
    width: 1px;
    }

    div.RadComboBox_MySkin td.rcbArrowCellHidden.rcbArrowCellRight
    {
    border-left: 0;
    }

    /* Read-only styles */

    /* dropdown */

    .RadComboBoxDropDown_MySkin
    {
    background: #ffffff;
    border-color: #616161;
    }

    .RadComboBoxDropDown_MySkin .rcbHeader,
    .RadComboBoxDropDown_MySkin .rcbFooter
    {
    background: #e3e3e3;
    color: #000000;
    }

    .RadComboBoxDropDown_MySkin .rcbHeader
    {
    border-bottom-color: #7d7d7d;
    }

    .RadComboBoxDropDown_MySkin .rcbFooter
    {
    border-top-color: #7d7d7d;
    }

    .RadComboBoxDropDown_MySkin .rcbItem em
    {
    background: #e6e6e6;
    }

    div.RadComboBoxDropDown_MySkin .rcbHovered
    {
    background: white;
    color: white;
    border: 1px solid #00c900;
    padding: 1px 5px;
    }

    .RadComboBoxDropDown_MySkin .rcbSeparator
    {
        color: #ffffff;
        background: #8a8a8a;
    }

    .RadComboBox_MySkin .rcbDisabled .rcbInputCell .rcbInput,
    .RadComboBoxDropDown_MySkin .rcbDisabled
    {
    color: #777877;
    }

    .RadComboBoxDropDown_MySkin .rcbLoading
    {
    background: #f0f0f0;
    }

    .RadComboBoxDropDown_MySkin .rcbMoreResults
    {
    border-top-color: #c2c2c2;
    background: #e3e3e3;
    color: #8a8a8a;
    }

    .RadComboBoxDropDown_MySkin .rcbMoreResults a
    {
    background: url('rcbSprite.png') no-repeat -1px -85px;
    }



  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    13 Nov 2010
    Link to this post
    Hi Neil,

    You should set the border of the RadComboBox item. You have to use rcbHovered skin selector.

    .RadComboBoxClassName .rcbHovered {
     
    background-repeat:repeat-x;
     
    border:1px solid red !important;
     
    }

    Here is a list with all RadComboBox selectors.

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
2 posts, 0 answered