Responsive Grid

Al3 (@al3)

2217

0

3

About This Space

This space demonstrates how to create a more responsive grid using a layout widget and a little bit of JavaScript.


Last updated on July 3, 2019

Public Permissions:   View   Open/Fork   Run   Comment  

Responsive Grid

This project demonstrates creating a page with a more responsive grid through the use of simple container layout widget and a little JavaScript.

Screenshot

Simple Container Layout widget

Any of the layout widgets can be used to create the same effect but with various appearances.

In this example the Simple Container Widget was used to add the responsiveness without adding any visual elements, allwoign the grid to completely fill the screen.

The Layout is placed on the screen and then the width and height were set to 100%.

The Grid widget, in this case the Blueprint Widget Set Grid Widget was then dropped inside the layout and the property expand to layout was set to true.

In addition the paging bar was turned on, adding the page number and export button.

The Grid

The example uses the BluePrint Widget Set Grid but any grid will work including the Mobile Grid. The important things are to set':

  • expand to layout to true
  • hide columns option to true

It will be more obvious that the height is adjusting properly if you also turn on the Paging Bar at the bottom. There are a number of properties that will turn on the bottom bar including show page number, show paging controls, and export options. But you can also turn on the bar itself with no other options by setting show bar to true.

The JavaScript

A JavaScript function was added to the OnLoad() event of the Main screen and is an event listener for window resize is added to call the function anytime the window is resized.

The setColumns() function uses grid apis to hide or show columns based on the pixel width of the window. Removing columns when the width gets smaller give you control over which columns are still visible as the grid is condensed and enables you to keep the most important information visible and readable.

Columns are numbered from left to right starting at 0. Columns will retain the same index id even after other columns are hidden or rearranged by a user (in the case of movable columns).

Because the grid will do it's own resizing some trial and error may be needed to find the best pixel widths to remove columns.

window.addEventListener("resize", function(){
  setColumns();
});
function setColumns(){
  //make sure there is a Grid1 first
  if(getObj('Grid1')){
    //if window is less than 1542 hide column 7 otherwise show column 7
    if(window.innerWidth < 1542){
      getObj("Grid1").grid.hideColumn(7);
    }
    else{
      getObj("Grid1").grid.showColumn(7);    
    }
    if(window.innerWidth < 1135){
      getObj("Grid1").grid.hideColumn(6);
    }
    .
    .
    .
    see complete function code in the screen OnLoad event property
    .
    .
    .
  }
}
setColumns();

API reference


Be the first to comment:      

Comments

Write Preview Markdown: bold italic code link
Post

More Spaces By Al3 (@al3)

Filters:

Popular Recent

This workspace implements Amazon Web Services Rekognition. The application uses your device camera to take your photo, determine how old you look, and tell you all about it using human speech though the speakers on your device.

555

1

2

This workspace implements Amazon Web Services Rekognition. The application uses your device camera to take your photo, determine how old you look, and tell you all about it using human speech though the speakers on your device.

Al3

361

1

1

This workspace implements Amazon Web Services Rekognition. The application uses your device camera to take a photo, analyze objects in the picture, and tell you all about it using human speech though the speakers on your device.

Al3

377

1

0

This workspace implements Amazon Web Services Rekognition. The application uses your device camera to take a photo, analyze objects in the picture, and tell you all about it using human speech though the speakers on your device.

Al3

270

0

0

This space creates an AWS S3 Bucket Browser using AWS SDK APIs. It allows you to create and delete buckets, list objects in a bucket, and Upload, download, preview or delete objects.

Al3

1867

0

1

This space creates an AWS S3 Bucket Browser using AWS SDK APIs. It allows you to create and delete buckets, list objects in a bucket, and Upload, download, preview or delete objects. This space is protected to protect the credentials being used for the example. To see the code or create a version to browse your own S3 buckets see http://noderun.com/al3/aws-s3-bucket-browser/

Al3

1398

1

1

Very basic file upload example using the File Upload Drag and Drop widget

Al3

1842

0

3

This app consumes a web service and display the information in a grid

Al3

743

0

0

A basic example of using Google Maps Address Autocomplete in a Rich Display Screen

Al3

318

0

0

A basic example of using Google Maps Address Autocomplete in a Rich Display Screen and a Google map view

Al3

183

1

0

A basic example of using Google Maps Address Autocomplete in a Rich Display Screen and a Google map view

Al3

157

0

0

This space uses a web service api from Houndify which enables it to interpret common language questions and respond.

Al3

1772

0

0