Incorrect form validation error style following kendo upgrade

[Ron]

Hello,
We use KendoUI with our Vue app and recently upgraded the kendo resource we use.


Old resources included:
"@progress/kendo-charts-vue-wrapper": "2018.3.1025",
"@progress/kendo-dateinputs-vue-wrapper": "2018.3.1025",
"@progress/kendo-drawing": "1.5.12",
"@progress/kendo-dropdowns-vue-wrapper": "2018.3.1025",
"@progress/kendo-theme-default": "2.63.0",
"@progress/kendo-ui": "2018.3.1219",
"@progress/kendo-validator-vue-wrapper": "2019.2.621"


New resources include:
"@progress/kendo-charts-vue-wrapper": "2020.2.912",
"@progress/kendo-dateinputs-vue-wrapper": "2020.2.912",
"@progress/kendo-drawing": "1.9.2",
"@progress/kendo-dropdowns-vue-wrapper": "2020.2.912",
"@progress/kendo-theme-default": "4.22.1",
"@progress/kendo-ui": "2020.3.915",
"@progress/kendo-validator-vue-wrapper": “2020.2.912”


As you can see in the attached image, following this upgrade, the kendo validator error message is not rendered correctly.
Following this we have several questions:




1) Can you pinpoint us which of the modules in the list above is responsible for the customization of the error message? This way we will be able to revert this specific module to the old version while keeping the rest of the modules updated.


2) If we wish to keep the new modules - can you guide us how we can match the styling? As we use Kendo all over the app, we are worried there are going to be a lot of places where such update will be required.


3) Are there any breaking changes for upgrading from 2018.3 to 2020.2 or to any of the upgrades mentioned above? If there are - where can we see them?


4) In a general note: Are you aware of any problems when using the old versions (e.g. 2018.3) on updated browsers / smartphones or should it be considered safe to stick with the older versions for some more time?


Thanks!

[Petar]

Hello Ron,

Thank you for the detailed description of the issue and the provided screenshot. 

Here are the answers to your questions:

• Q1: I cannot say if it is a given module or something else is triggering the reported issue based only on the list of the used components and the screenshot. To be able to give an argued answer, I will need a runnable example in which the reported behavior can be tested. Thus I will test the application locally and will be able to provide more relevant feedback about it. 
• Q2: As I don't know the exact implementation of your project, I can only guess what triggering the issue on your end. What I would assume is that the reason for the misaligned validation message is a custom CSS style. I assume that such is applied for another element on the page but it is also affecting the position of the validation message. The reason for this could be a change in the way the different elements are rendered from version 2018 to the current one.
• Q3: Based on the provided details, I can see that you are using Kendo UI for Vue Wrappers. They are wrappers of the Kendo UI for jQuery components. The breaking changes introduced in the Kendo UI for jQuery will be transferred to the Kendo UI for Vue Wrappers. Here you can see the breaking changes in Kendo UI for jQuery. Using the menu on the left, you can navigate the to the breaking changes through the years. 
• Q4: In general, we recommend our clients to always use the lastest versions of our suites. This recommendation is because of multiple reasons. The main ones are that a product version from 2018 can have issues on the modern browsers. Our latest releases are compatible with the latest releases of the modern browsers and there shouldn't be issues when they are used either on desktop or mobile device.  

To try to help you with the resolving of the issue, I've created this StackBlitz project. In it the validation messages are controller using the following CSS code:

.k-invalid-msg {
  display: inline-block;
  margin-left: 200px;
}

If you remove the code in yellow, the validation messages will go to the right. Can you check if you have and what is the definition of the "display" property of the "k-invalid-msg" class? If you don't have such definition, can you try using the above code and let me know about the result? 

With the code in green, we set additional margin. In general, you don't need the code in green, but you can also use a property like "margin-right" to adjust the position of the validation message.

If none of the above help you resolve the issue, can you send me a runnable example in which I can reproduce the reported behavior? You can use my project as a basis and try to replicate the incorrect positioning in it. When you are ready, send me the edited project and I will furhter test it.

Looking forward to your reply.

Regards,
Petar
Progress Telerik

[Ron]

Petar,

Thanks. Your answer allowed us to see that the module update seems to have changed the css classes we need to change from .k-tooltip-validation in the old version to .k-form-error - we will continue to go over these changes to hopefully fix the code to work properly with the latest modules.

 

Ron.

[Petar]

Hi Ron,

I am happy to hear that my answer has helped you identify what changes should be applied to your code, to make it work as it used to in the 2018.3.1025 version of the components.

Let me know if you need further assistance with the current ticket.  

Regards,
Petar
Progress Telerik