How to dynamically format dropdownlist

[Mongonv]

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;
}

 We have tried using div wrappers around the select HTML, adding classes, and anything else we could find.  

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.

[Plamen Lazarov]

Hello,

In order to set different border color you could use the code snippet below: 

.k-widget.k-dropdown.k-invalid  {
    border: 2px solid red;
}

Regarding the validation message position I would suggest to add a span with data-for attribute set to the validated input name and a class .k-invalid-msg. Please refer to the following documentation article for more information on how to customize the tooltip position. 

Here is a simple demo which illustrates this approach. 


Regards,
Plamen Lazarov
Telerik