This is a migrated thread and some comments may be shown as answers.

Responsive Layout

1 Answer 155 Views
TileLayout
This is a migrated thread and some comments may be shown as answers.
Marcin
Top achievements
Rank 1
Veteran
Marcin asked on 10 Jun 2020, 07:20 AM

How to define different layout based on media queries? Autoflow to another row etc?

1 Answer, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 11 Jun 2020, 04:00 PM

Hello Marcin,

Setting different layout via media queries is doable, however, this will break our JavaScript logic for resizing and reordering.

Having said that, if your app is not using resizing and reordering for the TileLayout, you could change the number of columns with CSS similar to:

    <style>
      @media screen and (max-width: 700px) {
        #tilelayout {
          grid-template-columns: repeat(2, minmax(0px, 1fr)) !important;
        }
      }
    </style>

For a runnable example, check this Dojo - https://dojo.telerik.com/oQuyoPoq

I hope this helps.

 

Regards,
Preslav
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
TileLayout
Asked by
Marcin
Top achievements
Rank 1
Veteran
Answers by
Preslav
Telerik team
Share this question
or