Responsive form sample/demo is not working

1 Answer 234 Views
Form
Jordan
Top achievements
Rank 1
Iron
Jordan asked on 13 Aug 2022, 11:31 PM | edited on 14 Aug 2022, 01:18 AM

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

1 Answer, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 17 Aug 2022, 11:32 AM

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

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.


Jordan
Top achievements
Rank 1
Iron
commented on 23 Aug 2022, 02:36 AM

Thank you
Tags
Form
Asked by
Jordan
Top achievements
Rank 1
Iron
Answers by
Aleksandar
Telerik team
Share this question
or