How do I match the front line? (When I set kendoForm, orientation: 'horizontal')

1 Answer 69 Views
Editor Form Grid Window
seungjun
Top achievements
Rank 1
seungjun asked on 22 Mar 2022, 02:30 AM | edited on 22 Mar 2022, 02:33 AM

Hello experts

How do I match the front line? (When I set kendoForm, orientation: 'horizontal')

please Answerㅠㅠ

 

link : https://docs.telerik.com/kendo-ui/api/javascript/ui/form/configuration/items#itemscolspan


<form id="myForm"></form>


<script>
  $("#myForm").kendoForm({
    formData: {
        ID: 1,
        FirstName: "John",
        LastName: "Doe",
        Address: "London",
        Postcode: "SW1A 1AA"
    },
    layout:"grid",
    orientation: 'horizontal',
    grid: {
        cols: 2,
        gutter: 20
    },
    items: [{
        type: "group",
        label: "Personal Information",
        layout: "grid",
        colSpan: 2,
        grid: {
            cols: 2,
            gutter: 10
        },
        items:[{
            field: "FirstName",
            label: "First Name:",
            validation: { required: true },
            colSpan: 1
        },{
            field: "LastName",
            label: "Last Name:",
            validation: { required: true },
            colSpan: 1
        },{
            field: "Addresss",
            label: "Address:",
            validation: { required: true },
            colSpan: 2
        },{
            field: "Postcodee",
            label: "Postcode:",
            validation: { required: true },
            colSpan: 2
        }]
    },{ 
        type: "group",
        label: "Shipping Address",
        layout: "grid",
        colSpan: 2,
        grid: {
            cols: 4,
            gutter: 10
        },
        items:[{
            field: "Address",
            label: "Address:",
            colSpan: 2,
        },{
            field: "Postcode",
            label: "Postcode:",
            colSpan: 2
        }]
    }]
  });
</script>

 

 

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 24 Mar 2022, 01:45 PM

Hi Seungjun,

I would suggest you style the labels and change their width in order to align the content in the Form. Below is an example:

<style> 
  .k-colspan-1>.k-form-label, 
  #Address-form-label, 
  #Postcode-form-label{
    width: 20% !important;
  }
  
  .k-colspan-2>.k-form-label{
    width: 10% !important;
  }
  
  .k-form-horizontal .k-form-field-wrap{
    max-width: 90%!important;
  }
</style>

Here is a Dojo where the above is demonstrated. 

I hope this helps.

Regards,
Neli
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/.

Tags
Editor Form Grid Window
Asked by
seungjun
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or