I am trying to figure out how to set dynamic bordering for select and datepicker widgets and cannot find a way to do this for kendo.
Attached is a screen shot of the non-formatting drop down that has the wrong border color and position for the validation message. The Inputs show the proper color and message location for valid and invalid components.
The CSS we are using for the inputs and trying to use for the other widgets is:
input.ng-invalid {
border
:
2px
solid
red
;
}
input.ng-valid {
border
:
1px
solid
green
;
}
.selectDropDown.ng-invalid {
border
:
1px
solid
red
;
}
.selectDropDown.ng-valid {
border
:
1px
solid
green
;
}
The two component definitions we are using are, where the select won't format and the input works great:
<li>
<label>Role Type:</label>
<select
kendo-drop-down-list
k-value-primitive=
"'false'"
required
data-required-msg=
"The Role Type is required."
class=
"selectDropDown"
style=
"width: 150px;"
k-ng-model=
"dataItem.roleType"
>
<option value=
" "
> </option>
<option value=
"APP"
>Applicant</option>
<option value=
"CON"
>Contractor</option>
<option value=
"ENG"
>Engineer</option>
<option value=
"OWN"
>Owner</option>
</select>{{dataItem.roleType}}
</li>
<li>
<label>Name:</label>
<input
type=
"text"
id=
"pplName"
name=
"pplName"
placeholder=
"Name"
ng-model=
"dataItem.cspCo"
class=
"k-textbox"
required
style=
"width: 350px;"
maxlength=
100
data-required-msg=
"The Name is required."
/>
</li>
Any assistance would be greatly appreciated.