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

Responsive Layout

1 Answer 402 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
-1
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.
Lee
Top achievements
Rank 1
Iron
Iron
Iron
commented on 02 Jun 2022, 01:37 PM

This is not a solution as the whole point of the tilelayout is to drag and drop to reorder content. If the user just wanted a grid layout he would just use a grid style layout which is easily resizable.  
Georgi Denchev
Telerik team
commented on 06 Jun 2022, 08:16 AM

Hi, Lee,

I've noticed that you opened and replied to several forum threads related to the TileLayout. I also saw the Feature Request that has been opened. I'll forward the information to the developers so they can review it. In the meantime, let us continue the discussion in the private support ticket where additional information has been shared.

Best Regards,

Georgi

Tags
TileLayout
Asked by
Marcin
Top achievements
Rank 1
Veteran
Answers by
Preslav
Telerik team
Share this question
or