Responsive form sample/demo is not working

[Jordan]

Hi All,

This example of a responsive form is not working.    The columns never collapse and stack.  They are aways 2  columns.

https://docs.telerik.com/aspnet-core/html-helpers/layout/form/layout?_ga=2.97006175.1914200844.1660175173-1309681442.1657934528#responsive-form

 

I have tried many other things also but nothing seems to work.   

I am using TagHelpers FYI

Update: I also tried the TagHelpers sample and it does not work either.

Is it possible to get a Respond kendo-form that has 2, 3, or 4 columns in desktop but collapse to 1 column on mobile?  

Thanks

 

 

Thanks

[Aleksandar]

Hello Jordan,

The example in question has the Grid configured to use the CSS Grid Layout. Indeed the example is broken and I'll look into updating it, but to achieve the desired result with the said example the following CSS can be used:

 @@media screen and (max-width: 600px) { 
        .k-form-field{
          grid-column-start: 1;
          grid-column-end: span 1;
        }
        fieldset{
            grid-column-start: 1;
            grid-column-end: span 1;
        }
        div.k-form-layout.k-d-grid.k-grid-cols-2 {
            grid-template-columns:repeat(1, minmax(0px, 1fr));   
        }
      }

Note that the class in the final selector will depend on the number of columns the form was initialized with, for example for six columns the class would be .k-grid-cols-6, so you might need to modify the selectors for the particular case you have. Here is a runnable demo of the above.

Regards,
Aleksandar
Progress Telerik

[Jordan]

Thank you