input-validation-error styling

[Stephen]

Hello,

I'm finding that the proper styling is not being applies(or it is being applied in the wrong order) when a control is in error in MVC.

Using the default Kendo UI MVC project out of VS2012, a control like so:

<input class="k-textbox input-validation-error" id="textBox" name="textBox" type="text" value="">

Does not get styled with a pink background, red border and instead retains the default styling.
The styling defined in the default Kendo Site.css(line 256):

.input-validation-error

{

    border: 1px solid #ff0000;

    background-color: #ffeeee;

}

 but it is just overridden by the default styling(from the theme css) instead of the error styling taking precedence.

If I remove the "k-textbox" class, then the background-color works, but the red border is still not in effect because it is overridden by the CSS on line 164 of Site.css:

input[type="text"]

{

    width: 200px;

    border: 1px solid #CCC;

}

Is it possible to get the provided error styles to take precedence over the non-error styles?
It does not work out-of-the-box.


Thanks.

[Stephen]

So, after researching further, I now know a little more about CSS precedence and know why this is not working.

The relevant styles for k-textbox are defined in the theme css as:

input.k-textbox {

...

}

and the error styling is defined is defined in Site.css as:

.input-validation-error

{

    border: 1px solid #ff0000;

    background-color: #ffeeee;

}

Apparently by the CSS specificity rules(here's a calculator: http://specificity.keegan.st/):
input.k-textbox has a rank of 11 and .input-validation-error has a rank of 10.
The bigger number takes precedence.

To fix it, you can change
.input-validation-error
to
input.input-validation-error (this is actually how is it is declared in the Microsoft Site.css)
AND
Put the Kendo Site.css *after* the theme css to break the rank=11 tie.
This way, input.input-validation-error takes precedence over input.k-textbox.

I'm not saying this is *the* solution, only that it appears to be working(so far).  It may very well mess up other styling.

[Dimo]

Hello John,

Generally, there are pros and cons in putting site.css before and after the Kendo UI stylesheets. We prefer to put it first, because it tends to override the Kendo UI styles to an extent which generates support. We don't want to increase the specificity of the Kendo selectors too much, because this will make the CSS files bigger and overriding more complex. In addition, site.css is just a simple demo stylesheet placed inside a demo project template and we don't expect it to be used in real life projects that use their own styling.

I recommend you to increase the specificity of the invalid styles' selector, it should not break anything else. The only problem you may experience is that the invalid styles may not be consistent with the Kendo UI theme. In this case you can consider using the Kendo UI validation instead.

Good for you on improving your CSS knowledge. CSS specificity is one of the most important concepts, which is hugely overlooked by the majority of non-front-end developers.

Regards,
Dimo
the Telerik team