Implementing a Responsive TileLayout

Updated over 6 months ago

Environment

Product

Progress® Kendo UI® for Angular TileLayout

Description

I want to make the TileLayout component responsive so that its layout adapts based on the browser size. The goal is to have the TileLayout adjust its tiles dynamically when the screen size changes and ensure that the layout remains user-friendly across different devices.

This Knowledge Base article also answers the following questions:

• How do I make a TileLayout component responsive in Angular?
• How can I change the number of columns in TileLayout based on screen size?
• What is the best way to adjust TileLayout properties for different screen sizes?

Solution

To implement a responsive TileLayout that adapts its layout based on the browser size, modify the number of columns and the autoFlow property of the component dynamically. This can be achieved by listening to the window's resize event and using the matchMedia() method to check for specific media queries.

1. Define initial values for the columns and autoFlow properties of the TileLayout component as preferred.

   html

   <kendo-tilelayout ... [columns]="columns" [autoFlow]="autoFlow"> </kendo-tilelayout>

   ts

   public autoFlow: TileLayoutFlowMode = 'column';
   public columns: number = 4;

2. Listen for the generic resize event of the document view and modify the columns and autoFlow of the TileLayout according to specific media queries. For example, the logic in the below code snippet makes adjustments to the properties when the document matches the media queries (max-width: 400px) and (max-width: 600px) respectively.

   ts

   constructor(private renderer: Renderer2) {
     this.renderer.listen('window', 'resize', () => {
       if (window.matchMedia('(max-width: 400px)').matches) {
         this.autoFlow = 'row';
         this.columns = 1;
       } else if (window.matchMedia('(max-width: 600px)').matches) {
         this.autoFlow = 'row';
         this.columns = 2;
       } else {
         this.autoFlow = 'column';
         this.columns = 4;
       }
     })
   }

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...

See Also

• TileLayout Auto Flow
• TileLayout Columns and Rows Dimensions
• Kendo UI for Angular TileLayout Overview
• API Reference of the TileLayout component