0

KendoUI Toolbar splitButton automatically highlights(partially in the link provided and in my case, completely) the first option in the dropdownlist. http://demos.telerik.com/kendo-ui/toolbar/index

In this url, if we observe, the Insert option has "Insert Above" set to blue instead of black. Similarly for Paragraph. How can I make all of them look the same.

Sailoosha
  • 193
  • 1
  • 3
  • 14

1 Answers1

2

You can customize css like that

<style>
    .k-button.k-state-focused, .k-button:focus {
      border: 0px !important; 
      background-color: #ffffff !important;
    }

    .k-button.k-state-focused, .k-button:hover {
      background-color: #f4f4f4 !important;
    }

    .k-list-optionlabel.k-state-selected.k-state-focused{
      background-color: #ffffff !important;
      border: 0px !important; 
    }
    .k-list-optionlabel.k-state-selected.k-state-focused:hover{
      background-color: #f4f4f4 !important;
    }
</style>
Panagiotis Pnevma
  • 331
  • 2
  • 5
  • Thanks for the suggestion. I am new to web programming. I did change the css file, however, only the main menu button is changed but not the options. I added like this... – Sailoosha Mar 15 '16 at 15:24
  • Html:
    css file: #rpt-toolbarOptions .k-button.k-state-focused, #rpt-toolbarOptions .k-button:focus { border: 0px; background-color: #9FC5F8; } #rpt-toolbarOptions .k-button.k-state-focused, #rpt-toolbarOptions .k-button:hover { background-color: #c1d4d1; } and other options in the similar way     – Sailoosha Mar 15 '16 at 15:26
  • In angular, I added the buttons. $scope.toolbarOptions = {items: [ { type: "splitButton", text: "New Report", menuButtons: [ { text: "Insert"}, { text: "Create"}, { text: "Download " } ], selected: "false" } ] – Sailoosha Mar 15 '16 at 15:30
  • can try to demo your case here http://dojo.telerik.com/UgixE and update the link? – Panagiotis Pnevma Mar 15 '16 at 16:17