Adjust Pop Up Size for Form Grid and List Grid

Introduction

This guide shows you how to adjust the pop-up size for form grids and list grids in Joget applications. By modifying the width and height of the pop-ups, you can enhance the user experience and ensure that grids are displayed more effectively.

How does it work?

To adjust the pop-up size, you need to insert specific JavaScript code into the Custom HTML section of the form containing the grid. This code modifies the dimensions of the pop-ups for both form grids and list grids.

• For Form Grids: The script sets the width and height of the form grid pop-ups to 90% of the viewport width and height.
  

  <script>
      $(function(){
          //make formgrid popup wider
          FormUtil.getField("items").find("#width").val("90%");
          FormUtil.getField("items").find("#height").val("90%");
      });
  </script>

• For List Grids: The script similarly adjusts the list grid pop-up dimensions.
  

  <script>
      $(function(){
          //make listgrid popup wider
          FormUtil.getField("items").data("width", "90%");
          FormUtil.getField("items").data("height", "90%");
      });
  </script>

Replace "items" with the field ID of the grid element appropriately.

Video Tutorial

The video below provides visual representation of the steps mentioned.

Sample App