Responsive Layout

[Marcin]

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

[Preslav]

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

[Lee]

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]

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