This is a migrated thread and some comments may be shown as answers.

DropDownList styling madness

3 Answers 367 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Stephen
Top achievements
Rank 1
Stephen asked on 24 Jun 2013, 06:28 AM
We thought long-and-hard about committing to kendo, mostly because our layouts are quite specific and pixel-perfect and we have had poor experiences styling aria-based widgets. It seems to be a constant fight with the native (or default) styling. It often ends up in a firebug-based game of whack-a-mole - very expensive, time-wise.

Here is the deal - and I have wasted a huge amount of time with this, so I would really appreciate a timely reply. 

We have a page with combo boxes, date widgets and multi-selects - all of which are able to style successfully but with effort. Mostly, this effort involved having to adjust a lot more than just the .k-select and .k-input selectors (as has been advised in this forum telerik maintainers). We had to additionally deal with padding the input, adjusting the vertical position of the icon image and so on.

But these widgets have a "faux" input within .k-dropdown-wrap.

The drop down list is structured differently, of course, but the way you have set up the css makes this a knotty problem to deal with. 

Rather than do the details here, I have attached (what-I-hope are) the relevant overrides along with a few screenshots. As you can see from the screenshots, the default state is fine - but the hover and focus state is not. 

Note that the attached css is nutty - and does not work, obviously - and I honestly reached this point and then gave up. 

Basically we need to:
  1. have all widgets be 24 px height
  2. have the default text (and placeholders when present) align in the center (not that we have had to add padding-top to make this happen)
  3. have the icons centered in all cases
  4. have the text-colors and sizes carry through from the parent div (this is font-size 13px and color #254a77) - this works, by the way.
  5. in the hover and focus state, the input BG needs to stay #fff while changing the .select span BG to #254A77.
  6. There can be no change in position of any of the elements between default and hover/focus states.
Please note that I have lost the styled select BG color on the combo boxes but not on the drop downs - this is supposed to be #f69322.

I would really like to know how template this style so that I do not need to bother you in the future.

Note finally that each widget has a different width which we successfully do with fairly specific selectors.

Thanks for your help

S

3 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 26 Jun 2013, 10:33 AM
Hello Stephen,

Apologies for not getting back to you earlier. 

Basically in order to customize the appearance of Kendo UI widgets you should override the default styling using custom CSS (more detailed information is available in this help topic). Also it is recommended using some browser inspector to check what HTML and CSS is applied in a given situation. For your convenience I prepared a simple jsBin example with most of your requirements - please check it and let me know if this helps. 

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Stephen
Top achievements
Rank 1
answered on 26 Jun 2013, 11:36 AM
Hello Iliana

thanks for the reply.

i am not sure if u are a telerik employee or just a forum contributor, but I will the former.

First, we are very experienced developers so: 1) of course we have custom CSS; and 2) we use latest FF with extensive firebug debugging.

We are reviewing the css you sent but I can say that this repeats what we had previously but then we were forced to start down another path due to styling issues that we will point out to you. Mainly, this has to do with differences in how the widgets are structure.  Also, the kendo-native css tied to the aria state is very tough to track and customize.

We will send more detail shortly.

S
0
Iliana Dyankova
Telerik team
answered on 28 Jun 2013, 10:49 AM
Hello Stephen,

First of all let me apologize - with my previous reply I aimed to help not to inconvenience you. I agree my example is similar to your styles, however the approach for customizing the appearance of Kendo UI Widgets is to use custom CSS. In case you encounter with any further troubles or have particular questions feel free to contact us again - we will be glad to help.

On a side note, you could take a look at the Kendo UI ThemeBuilder which gives an opportunity to modify Kendo UI themes. 

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
DropDownList
Asked by
Stephen
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Stephen
Top achievements
Rank 1
Share this question
or