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

0 Answers 44 Views
Form
Aeong
Top achievements
Rank 1
Iron
Aeong asked on 27 Sep 2023, 02:11 AM | edited on 27 Sep 2023, 02:12 AM

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
Telerik team
commented on 29 Sep 2023, 01:43 PM

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
Top achievements
Rank 1
Iron
commented on 04 Oct 2023, 12:19 AM

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

Please try this. thank you!

Nikolay
Telerik team
commented on 06 Oct 2023, 01:52 PM

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:

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

Regards,

Nikolay

 

 

No answers yet. Maybe you can help?

Tags
Form
Asked by
Aeong
Top achievements
Rank 1
Iron
Share this question
or