Desktop Components ShowcaseMobile Components Showcase
ace:resizable - Overview

The <ace:resizable> component component is an embeddable element that when used in conjunction with other components such as input fields, panels, menus etc. will allow them to be resized. Options allow the target component to be resized in one or two directions, and to be combined with various animations that will activate upon completion of the resizing. In the example below, select the small triangle at the bottom of either of the panels below with the left mouse button. Keeping the button depressed drag the mouse to resize the element. Release the button when the desired size is reached. The black panel is set to resize in a manner that preserves its original aspect ratio, while the white panel will resize horizontally and vertically according to preset grid sizes.

Resizable panel
My resizable options are:
  • Grid like resizing
  • Maximum and minimum resize constraints
  • Any direction resizing within constraints
Source Code