{"id":72037,"date":"2026-06-04T16:44:11","date_gmt":"2026-06-04T08:44:11","guid":{"rendered":"https:\/\/oihelp.corporate.ifs.com\/help\/?page_id=72037"},"modified":"2026-06-25T12:09:25","modified_gmt":"2026-06-25T04:09:25","slug":"responsive-layout","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/responsive-layout\/","title":{"rendered":"Responsive Layout"},"content":{"rendered":"\n

This article applies to IFS OI Explorer versions 26R1 (IFS Cloud release) and later. For more, see Release History<\/a>.<\/p>\n

Overview<\/h2>\n

Responsive Layout divides a page into 12 equal columns, supporting flexible page design across a range of screen sizes. Components can span multiple columns and rows, allowing content to adjust as the available screen width changes.<\/p>\n

A page created with the Responsive Layout contains a preconfigured Responsive Grid, defined by default as a 12x7 grid of 1x1 cells. Newly added rows also contain 1x1 cells.<\/p>\n

The Responsive Grid arranges components in a left-to-right, top-to-bottom flow. You can drag or paste components into the layout, and they are placed within this flow. Components can be repositioned, but their placement follows the layout flow rather than fixed cell positioning.<\/p>\n

When the screen width is reduced and there is not enough space for all columns, the column count is reduced, and components are rearranged automatically to fit the available space.<\/p>\n

Responsive Layout Properties<\/h2>\n

Responsive layout properties control the page layout, grid structure, and title and date range picker settings.<\/p>\n

\"\"<\/a><\/p>\n\n\n\n\n\n\n\n\n
Title<\/strong>:<\/td>\nThe text displayed in the page title bar.\u00a0<\/td>\n<\/tr>\n
Date Range Picker<\/strong><\/a>:<\/td>\n\n
Determines whether a date range picker is shown in the title bar. By default, this is set to None<\/strong>, which hides the picker. Select Fixed Reporting Period<\/strong> or Timeseries<\/strong> to display a date range picker.<\/div>\n<\/td>\n<\/tr>\n
Min Column Width<\/strong><\/a>:<\/td>\nDefines the minimum width allowed for a column. When this width cannot be maintained due to reduced screen width, columns are rearranged onto a new row. Select from the fixed options: XS, S, M, L, or XL.<\/td>\n<\/tr>\n
Row Height (px)<\/strong>:<\/td>\nDefines the height for all rows in the layout, in pixels.<\/td>\n<\/tr>\n
Rows<\/strong>:<\/td>\nSpecifies the number of rows in the layout. Use the Add<\/strong> and Remove<\/strong> options to adjust the row count. Newly added rows contain 1x1 cells by default.<\/td>\n<\/tr>\n
Selected Cell - Cell Title:<\/strong><\/td>\nThe label for the selected cell. This can be used to provide a title for the content within that cell.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Date Range Picker<\/h3>\n

The date range picker can be used to display a date selection control on the page. You can select an option from the Date Range Picker dropdown.<\/p>\n

None<\/strong>: The default selection. Hides the date range picker from the page.<\/p>\n

Fixed Reporting Period<\/strong>: Displays a date range control based on predefined reporting periods. You can select the Default Period<\/strong> and Report Time<\/strong> to configure how the reporting period is applied.<\/p>\n

\"\"<\/a><\/p>\n

Timeseries<\/strong>: Displays a date range picker with time-based selection. You can select a Default Period<\/strong>, enable Live<\/strong> to automatically update the time range, or select an End Date<\/strong>.<\/p>\n

\"\"<\/a><\/p>\n

Min Column Width<\/strong><\/h3>\n

The Minimum Column Width setting controls how the layout adapts to different screen sizes.<\/p>\n

The layout uses a 12-column grid. When there is not enough horizontal space, columns do not shrink below the selected width. Instead, the number of columns is reduced, and components move onto new rows.<\/p>\n

The available options represent typical screen sizes:<\/p>\n