How to change the color of item selection radcombobox with a css style?

8 posts, 0 answers
  1. Mehdi
    Mehdi avatar
    17 posts
    Member since:
    Jun 2012

    Posted 11 Dec 2012 Link to this post

    I was wondering if was possible to change the value of "background-color" for the selection of a radCombobox.


    Here is the css code I used:
    (I can change everything but not  the color of highlighted items ....)

       
    div.RadComboBox_Metro .rcbInputCell INPUT.rcbInput    
    {    
    background-color: #9BCDFF;
    }

    "Metro" being the name of the "skin" of my radcombobox

    Thanks to all

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Dec 2012 Link to this post

    Hi Mehdi,

    Try overriding the default CSS using !important as follows to achieve your scenario.

    CSS:
    <style type="text/css">
        .RadComboBox_Metro .rcbInputCell
        {
            background-color: #9BCDFF !important;
        }
    </style>

    Hope this helps.

    Regards,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mehdi
    Mehdi avatar
    17 posts
    Member since:
    Jun 2012

    Posted 11 Dec 2012 Link to this post

    Hello,
    Thank you very much for your quick response. But that does not change the color of highlighted items only item being handpicked.
    Do you have any idea about it?
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Dec 2012 Link to this post

    Hi Mehdi,

    I suppose you want to highlight the selected RadComboBoxItem in the dropdown of RadComboBox. Please take a look into the following code.

    JS:
    <script type="text/javascript">
        function OnClientSelectedIndexChanged(sender, args) {
            var item = args.get_item();
            item.get_element().style.backgroundColor="#9BCDFF";
        }
    </script>

    Please elaborate your scenario if it doesn't helps.

    Regards,
    Princy.
  6. Mehdi
    Mehdi avatar
    17 posts
    Member since:
    Jun 2012

    Posted 12 Dec 2012 Link to this post

    This code changes the background correctly in my element! But the background color is changed only when the index selection has changed! and not for the overview (highlight) of my items.
    Perhaps there is no solution for this problem. Should be used as a client function ("onClientHighlightedItemChanged") does not exist unfortunately.

    I have try this with the "get_highlightedItem()"
    but no result..

    function cmbx_dbListUserOnClientSelectedIndexChanged(sender, args) {
                            var combo = $find("<%= cmbx_dbListUser.ClientID %>");
                            var highlightItem =  combo.get_highlightedItem();
                            if(highlightItem != null)
                            {
                                highlightItem.style.backgroundColor = "#9BCDFF";
                            }
                        }


  7. Mehdi
    Mehdi avatar
    17 posts
    Member since:
    Jun 2012

    Posted 12 Dec 2012 Link to this post

    Finally after a complete headache and several tries. My code below works for the first item highlighted, but not for others .... Have you any idea why?
    Thanking you in advance

    function cmbx_dbListUserOnClientSelectedIndexChanged(sender, args) {
                var combo = $find("<%= cmbx_dbListUser.ClientID %>");
                 var highlightItem =  combo.get_highlightedItem();
                 if(highlightItem != null)
                  {
                        highlightItem.get_element().style.backgroundColor = "#9BCDFF";
                  }
     }
  8. Mehdi
    Mehdi avatar
    17 posts
    Member since:
    Jun 2012

    Posted 12 Dec 2012 Link to this post

    Finally,Finally ,Finally ,Finally  after a complete headache and several tries. My code below works !!!

    div.RadComboBoxDropDown_Metro .rcbHovered
    {
        border: 1px #7FB8FF !important;
        background-color: #7FB8FF !important;
    }
    .RadComboBox_Metro .rcbFocused .rcbArrowCell, .RadComboBox_Metro .rcbFocused .rcbReadOnly .rcbInputCell, .RadComboBox_Metro .rcbFocused .rcbReadOnly .rcbArrowCellHidden {
        background-color: #7FB8FF !important;
        border: 1px #5B85B7 !important;
    }
  9. Eon
    Eon avatar
    15 posts
    Member since:
    Apr 2015

    Posted 05 Apr in reply to Mehdi Link to this post

    Thanks Mehdi,

     

    Your CSS solution also worked for me.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017