30 - Widget and section resizing

📖 Task Introduction

Workshop abstracts away the need to write HTML or CSS to resize your widgets or sections. As you read in the widget documentation, configuration panels will allow you to set height and width in absolute or relative terms.

Say you’ve decided that your filter list widget is too cramped and should be expanded by ~10%. This task will walk you through one way to resize your sections, which can also be applied to widgets within those sections.

You’ll have more opportunities to experiment with layout patterns and sizing in future tutorials.

🔨 Task Instructions

1. Click on the Section: Inbox Filters item in your layouts panel and look at the DIMENSIONS area of the configuration on the right.

   • By default, your page was set up with a column layout, which means your filter and table sections have a columnar relationship.

2. Your filter section has an Absolute column width of 300 pixels. Change it to 350 and observe the sizing change

   • You may instead want to define a size proportional to the object table rather than in absolute terms.

3. Click into the Section: Table section and look at the DIMENSIONS area of the configuration on the right. Your table section has a Flex value of 1.

   • Let’s say we want a 3-to-1 ratio between the table and filter size.

4. Change the table section’s Flex value to 3.

5. Click back into your Section: Inbox Filters item and in the DIMENSIONS area of the configuration panel, change the Column Width option to Flex and enter the value of 1.

   • ℹ️ Widgets can be resized in absolute terms or relative (using Flex) to other widgets in the Section. Corresponding settings can be found in the Display tab of a widget’s configuration panel.

6. Save and publish your module, then review the module in View mode.