External form resizes on validation errors - poor UI experience

[James]

I've noticed the external form editing example has some exaggerated form resizing problems on validation errors.

https://www.telerik.com/kendo-angular-ui/components/grid/editing/external-editing/

Simply click Add, then enter alpha chars for the Units in Stock. The form widens way too much and also increases height to accomodate the unhidden text element.

Is there a way to fix the form so that it either resizes more predictably, or preferably doesn't resize and instead has space for the validation text to appear.

[Dimiter Topalov]

Hello James,

Thank you for bringing this issue to our attention. Indeed, the unexpected resizing of the whole Dialog component holding the form is far from ideal. The most straight-forward approach to fix the issue is setting explicit height and width to the Dialog component.

The styling of the form validation messages can be further customized by removing the built-in k-... classes and using custom styling and/or toggling their visibility rather than completely removing them from the DOM so that the structure and spacing of the form fields are not changed when the message appears.

Here is the updated example with the described adjustments applied:

https://stackblitz.com/edit/angular-gtr77h?file=app/edit-form.component.ts

We will also make sure to update the documentation demo accordingly.

Regards,
Dimiter Topalov
Progress Telerik

[James]

Thanks for the updated example. As not every field has validation the form looks odd with the empty validation elements. I think popup validation errors would look better so we're working on that approach instead. Thanks again.