The new Draggable Sizing update introduces a new way of adjusting all the builder elements sizing and spacing options right from the Visual Builder or the new Backend Builder interface. 

We have also included a new set of options for sizing that includes minimum height, height, maximum height and for vertical and horizontal overflow that will give you even more control over all the builder elements.

Before this update, you were able to easily drag to adjust the section and row padding from the Visual Builder without having to open the individual element settings. With this update we are expending on that so you can now drag to adjust more sizing and spacing options such as width, minimum height and the margin for all elements (sections, rows and, modules).

Hover over the element border and when the Width/Min Height tooltip is visible you can click and drag to adjust the size.

(click on the image to see the full size)

To adjust the margin, hover over the element just outside border and when the transparent indicator is visible you are ready to click and drag. Similarly, for padding, hover over the module and inside the border, you can start dragging as the indicator becomes active.

(click on the image to see the full size)

All these options can also be accessed and adjusted from the element settings modal as previous. 

As mentioned earlier we are introducing a new set of options for sizing your elements. These new options can be found under the element settings > Design > Sizing and it includes:

Set the min height for the element. The element height cannot be smaller than the value set.

Set the element height. This can be overwritten by the min height value if the height value is smaller.

Set the element max height. The element height cannot exceed the value set.

The overflow options will allow you to control what happens when the content overflows the element area. For instance, if you set a max height on an element there's a chance that content will overflow and with these new options, you will be able to adjust how overflowing content behaves.

The Horizontal and Vertical Overflow options can be found under the element settings > Advanced > Visibility. Each overflow axis can be set to the following values.

The overflowing content is not getting clipped, it renders outside the element area.

The overflowing content is clipped and a scrollbar is included to allow scrolling inside the element area to see the full content.

The overflowing content is clipped and invisible.

If the overflowing content is clipped a scrollbar is included to be able to scroll inside the element area and see the full content.

Here is a quick demo with a row that has a max height of 200px where the full content will not fit.

(click on the image to see the full size)

Stay tuned for more cool features coming your way! 😎