CODEWITHSUNDEEP
csskendo-ui
Ciel
Ciel

Reputation: 4440

Kendo UI DropDownList - skinning issues with CSS

I am attempting to skin a Kendo UI DropDownList widget for my own site, and have had fairly good success with a small caveat that is driving me nuts.

I am including a link to a jsBin that demonstrates the issue, and some screenshots. But basically what is happening is that I want the entire dropdown list to be flat (no border radius), and then to be very solid (white background, black text) and the currently selected item to have a thick red bar as its left border (3px in my example), and then as you hover over the items in the list box, their left border becomes a thick greenish/blue bar.

This is working, except for some strange spacing issues; First of all, as I hover over things, they "jump" around. They get pushed this way and that a bit obnoxiously, making it feel non-uniform. I really want to fix that; and the thing that is driving me the most nuts is that the "bar" that I use on the left-border is having a strange curvature to it, making it look very out of place, as if it is almost beveled. Can anyone assist with this?

jsBin Example

enter image description here

Upvotes: 0

Views: 1678

Answers (1)

MustafaP
MustafaP

Reputation: 6633

.custom-dropdown .k-item {
  background: white;
  font-weight: lighter;
  padding: 0 4px;
  border-left: solid 2px white; // add this
}

.custom-dropdown .k-item.k-state-selected,
.custom-dropdown .k-item.k-state-focused {
  color: black;                  // and add this
  border: solid 1px white;
  border-left: solid 3px #b91d47;
}

I think there nothing to do for strange curvature.

http://www.w3schools.com/css/css_border.asp

http://jsbin.com/elOSuDo/1/edit updated jsbin

Upvotes: 2

Related Questions