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.

Author: megan.bond