Validation messages on the same line as the input

[AP]

I have a form, which uses Kendo validation to check the mandatory fields have been completed. This works, but the validation messages appear underneath the form fields, disrupting the form layout.

If I add the following style to my page, the messages appear next to the inputs:-

.k-form-error
    {
        display:inline-block !important;margin-left:5px;
    }

 

However, if this is done, the messages do not disappear when the field is filled in. How can I achieve this?

NB: I do find the new-look forums to be much less useable than the old one, |t is much harder to browse through previous posts for a topic.

There is also no suitable tag for this question.

[Eyup]

Hello,

 

Thank you for writing to us.

I have forward your feedback about the forums appearance to the responsible team.

As for the validation requirement, setting display with the !important directive can cause the errors never to vanish.

Instead, you can try using the CSS float: left approach:
https://www.w3schools.com/css/css_float.asp

Feel free to give it a try and let me know if this helps you. If the issue remains, modify this live dojo sample to demonstrate your configuration and send it back to us:
https://dojo.telerik.com/IWaWeNoM

Then, I will be able to send you more precise and accurate CSS rules.

 

Regards,
Eyup
Progress Telerik

[AP]

Thanks for the response. Unfortunately, whilst using float does put the message on the same line, using float left puts the message between the label and the input, and float right puts the message at the far right-hand side of the page. (Image attached).

I need the messages to display next to the input boxes, as display:inline-block achieves.

NB: The dojo demo has full-screen input controls, so doesn't demonstrate the problem exactly.

[AP]

I have just tried using display:inline-block, without the !important modifier, and it has worked.

It would be good to have all the styles used in Kendo UI properly documented, as they are a crucial part of understanding how the framework works.

[Eyup]

I am glad that you've managed to resolve the issue and thank you for sharing your specific approach with our community.

I hope it will prove helpful to other developers as well.