---
title: "Resizing Grid Elements with Stacks and Split Panels"
slug: "resizing-grid-elements-with-stacks-and-split-panels"
updated: 2023-09-21T09:58:54Z
published: 2023-09-21T09:58:54Z
canonical: "documentation.decisions.com/resizing-grid-elements-with-stacks-and-split-panels"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Resizing Grid Elements with Stacks and Split Panels

Example Lab ArticleWhile Example Lab projects are resources for public use, articles and assets are not actively maintained. Screenshots and features are from the specified version below. These references may become dated as new versions are released.

---

## Overview

| ## Example Lab Details |
| --- |
| **Version** | 6.17.0 |
| **Root Folder** | Example Lab - Resizing Grid Elements with Stacks and Split Panels |
| **Modules** | None |
| **Dependencies** | None |

This Example Lab demonstrates how to use Vertical Stacks and Split Panels in a Form/Page to allow the end user to resize grid elements.

---

## Explanation

This example project demonstrates how to resize a column within a Page through use of a **Vertical Stack** and a **Split Panel**. If a user wishes to resize rows instead, a similar configuration with Horizontal Stacks and Horizontal Split Panels can be constructed with this example project as reference.

The Page within this example displays two columns each with two Reports. The left column demonstrates how to resize with a Split Panel. To replicate this, place the elements in need of resizing, in this case two Report Viewers, inside the Split Panel. In the Properties of the Split Panel, the Percent of First Panel setting will configure the default size of the top panel. End users may resize the panels by clicking and dragging the two grey bars between the panels. The right column demonstrates how to resize with a Vertical Stack. Within the Vertical Stack, two Header containers are placed. Each Header container contains a Report Viewer. End users may resize panels by clicking the Headers to open and close it's respective Report Viewer. The elements will automatically resize according to the size of the parent Vertical Stack.

Reference Articles[Horizontal and Vertical Stacks](https://documentation.decisions.com/docs/horizontal-and-vertical-stack-layouts)  
[Split Panel Layout](https://documentation.decisions.com/docs/split-panel-layout)

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2021-08-23_16h31_19.png)

---

## Project Download

The examples attached were developed to be instructional and were not developed as officially supported components. For more information or to engage our service team to develop fully supported, production-quality solutions, please contact services@decisions.com. Import the project below to a Decisions environment on version 6.17.0 or later using our [Importing/Exporting](https://documentation.decisions.com/docs/importing-and-exporting-projects) article.  
  
[ExampleLab[ResizingGridElementsWithStacksAndSplitPanelsSample.].zip](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/ExampleLab%5BResizingGridElementsWithStacksAndSplitPanelsSample.%5D.zip)  

---