When using ColSpan in Kendo Form, the output looks strange.

[Aeong]

Hello, kendo practitioners! I always get a lot of help.
While creating an input form using KendoForm, I used colSpan to create a 2-space field, but it is displayed out of proportion as shown below.

The field's label area is displayed larger.

 

The code was written as follows.

$('#grid').kendoForm({
    grid: {
        cols: 4,
        gutter: 20
        },
    items: [{
               field: "field1",
               label: "Field1"
            },{
               field: "field2",
               label: "Field2"
            },{
               field: "field3",
               label: "Field3",
               colSpan: 2
            }]
});

Is there any way to solve this?

[Nikolay]

Hi Aeong,

Thank you for sharing the Form declaration and the screenshot of the problem.

This Form declaration renders the following which is not exactly what is on the screenshot:

Here is the Dojo I used for testing: https://dojo.telerik.com/oyabOjOd

Is it possible to modify it to showcase the problem so I can advise further?

Regards,

Nikolay

[Aeong]

https://dojo.telerik.com/oyabOjOd/3

Please try this. thank you!

[Nikolay]

Hi Aeong,

Thank you for the Dojo.

With the current implementation of the Form, this behavior is expected. The last item with colSpan does not know about the previous items and can not align accordingly.

Nevertheless, I logged this for enhancement. The development team will review it and if possible apply the necessary changes to the Form component.

You can track the progress of the item using the following links:

• Feedback portal: https://feedback.telerik.com/kendo-jquery-ui/1626329-form-in-horizontal-orientation-does-not-align-the-items-correctly-in-grid-layout
• GitHub: https://github.com/telerik/kendo-ui-core/issues/7544

As a token of gratitude, I have added some Telerik points to your account.

Regards,

Nikolay