Validation messages on the same line as the input

1 Answer 52 Views
General Discussions
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 14 Sep 2021, 09:21 AM

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.

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 17 Sep 2021, 07:54 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

AP
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 17 Sep 2021, 12:22 PM

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
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 17 Sep 2021, 12:25 PM

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
Telerik team
commented on 22 Sep 2021, 10:09 AM

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.

Tags
General Discussions
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Eyup
Telerik team
Share this question
or