Horizontally Scroll a Grid

About This Space

Examples for how to set up a grid to be horizontally scrollable, but only if the screen is too small, otherwise, it just fills available space.


Last updated on August 26, 2019

Forked from: /megan_bond/quick-display/

Public Permissions:   View   Open/Fork   Run   Comment  

Horizontal Scroll for Grids & Resize Grid on Window Size/Orientation Change.

Description

How to horizontally scroll a grid too big for its container and how to resize a grid when the window size or orientation is changed.

** Please note that the data used to fill the grids is random and does not correspond to known persons.

** Please note that what is being provided is only an example, you may need to do some customization or derivation to create the solution best suited to your project requirements.

Instructions

  1. Add desired layout to the screen.
  2. Nest a Simple Container layout widget inside the previously added layout.
  3. Set width and height of the Simple Container to 100% so that it fills the outter layout.
  4. Set min-width of Simple Container to the minimum width you would like the grid to be. Must be a non-relational unit, i.e. 650px.
  5. Add grid to the Simple Container.
  6. Set overflow x of outermost layout to scroll or auto. If the outermost layout is a:
  • Simple Container - set overflow x widget property in the properties panel.
  • Mobile Layout - custom css is needed, as shown below. Custom CSS should be added to a *.css file in the .../userdata/custom folder (when using IFS or local installation of Profoudn UI or PJS) or linked to the screen by setting a link in the HTML, import with JS or jQuery, or linked using the external css property of the screen (as has been done in this example on NodeRun).
     /* Mobile Layout X Overflow CSS Property                */
     /* overflow-x property possible values:                 */
     /* auto    - Show scrollbar only if can scroll          */
     /* scroll  - Always show scrollbar.                     */
     /* visible - Content is visible past container borders. */
     /* hidden  - Content is hidden past container borders.  */
     div.mobile-device-layout div.content-section {
         overflow-x: auto;
     }
    
  1. Test it out your program and see how it fits to the available space, but overflows if the screen gets to be too small.

How to Use

Fork to new workspace to make additions, edits, and changes.


App...                                ...Name
File index.js
Function index() {...}
Display index.json
Screen index

Author: megan.bond

Date: Aug 11th, 2019

Be the first to comment:      

Comments

Write Preview Markdown: bold italic code link
Post

Filters:

Popular Recent

Empty template with the basics set up for a quick display.

26150

0

0

23874

0

0

24701

0

1

Tried out suppressing alert boxes so that all errors that would normally display in an alert box would instead display in the browser console.

23739

0

0

Empty template with the basics set up for a quick display.

19931

0

0

Empty template with the basics set up for a quick display.

23577

0

0

A demo of how to build, test and consume APIs

6133

0

0

widget set

12124

0

0

Compile an isolated Bootstrap.

24436

0

1