Middle Toolbar

Middle Toolbar is placed at the top of canvas and contains Refresh / Position / Frame / Background Color / Show/Hide Widget Button area.

Refresh

Refresh current canvas.

Position

Position area consists of Position/ Align options/ Input fields/ Stepper for X & Y position.

  • Position : Select position from select - Absolute/ Relative/ Fixed.
  • Sub Position : Select sub position from select.
  • Align Button : Consist of align vertical center and align horizontal center buttons and align multiple element button.
  • Position Setting Popup (Down Arrow) : You can change fixed center position, overflow, z-index properties.
  • X position input field & stepper : You can change X value by typing value into text field or clicking stepper. (px or %)
  • Y position input field & stepper : You can change Y value by typing value into text field or clicking stepper. (px or %)

Frame

Frame area consists of Input fields/ stepper for width & height value.

  • Width input field & stepper : You can change Width value by typing value into text field or clicking stepper. (px or %)
  • Height input field & stepper : You can change Height value by typing value into text field or clicking stepper. (px or %)
  • Frame Setting Popup (Down Arrow) : You can change min-width , max-width , min-height , max-height , calc-width , calc-height properties.

Background Color

Background Color area consists of set background color button/ set gradient popup. You can change the background color and the color gradient of the selected widget.

Show/Hide Widget Button

Show and Hide widget list.