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:
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
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:
- have all widgets be 24 px height
- 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)
- have the icons centered in all cases
- 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.
- in the hover and focus state, the input BG needs to stay #fff while changing the .select span BG to #254A77.
- There can be no change in position of any of the elements between default and hover/focus states.
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