Responsive Layout

2 posts, 0 answers
  1. Marcin
    Marcin avatar
    193 posts
    Member since:
    Jan 2011

    Posted 10 Jun Link to this post

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

  2. Preslav
    Admin
    Preslav avatar
    583 posts

    Posted 11 Jun Link to this post

    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.
Back to Top