About Control Styling
The UI Designer allows you to configure styling for controls, with options depending on the control type.
Click any Control in Current Form View to slide out the right-side Property panel. If the selected control can be styled, the Style button is enabled. Click the Style button to view control styling options:
The UI Designer allows users to change the control’s look and feel by setting styles, including:
Background Color
Width
Height
Font
Font Size
Font Color
Border Width
Border Color
Margins
Paddings.
NOTE: In Responsive mode, Width is replaced by Max Width, and some Margins properties are removed.
Colors
The UI Designer uses a color picker to help users pick their color of choice.
Click the More Colors option to show a color picker. You can click on any of the color cells in the color comb to select a color. The right-side color bar updates based on the selected color. Clicking any color automatically applies the color to the control.
The color blocks automatically adjust as you select other colors, to allow quick access to previously used colors. The last block in the row represents transparency, so there is no fill or color (RGBA (0, 0, 0, 0)).
Fixed Width Forms - Width and Height
Width and Height fields allow you to change the width and height of a selected control. The default width for any control is set to 100%, which is the same width as its parent element (like a container table cell). Once the width is changed, it is set to a number width using pixels as the unit of measure. This is also true for controlling height.
When possible, you can also set the control’s height and width by dragging the square resize handler:
Responsive Forms – Max Width and Height
Responsive form controls behave differently than fixed width form controls, in order to allow support for all device types. Most responsive controls do not have a height or width property set by default, and most of these controls do not support a width property at all.
For controls in responsive mode, the click and drag handles that allow adjustment of the width are not available. The only exceptions are the Radio Buttons, Checkbox, and Image Button.
Property | Description | Example |
Height | By default, controls do not have a height property. This means, by default a control will fit its container horizontally, but grow to fit its content vertically. To set a permanent vertical height for the control, use the handle on the bottom of the element selector or manually fix the pixel height in the properties panel. This change can be reverted by clearing the height field in the style menu, or clicking none. |
|
Max Width | Can be used to control the horizontal size of elements and positioning of elements within a cell. When a max width is set, elements will not get any wider than this value |
Font Styling
You can change a control value’s Font, Font Size, and Font Color. There are five levels of font sizes in the UI Designer: Small, Medium, Large, X-Large and XX-Large respectively. If no text is entered and no Default Value set for the control, you may not be able to visualize the font changes.
Margins
The UI Designer uses left-margins and top-margins to adjust the position of a control inside its container. Just like control resizing, there are two ways to change the margin (or position) of a control.
One way to change margins is by selecting the Margin-Left and Margin-Top fields in the Style Panel.
Another method is dragging the round handlers with two-direction arrow icon in control selector.
Saving and Editing Styles
The default style of any control is called Custom. Control styles can be saved and reused by other controls. The saved style can still be changed by changing the style values in the Style Panel and saving over or adding to the existing styles:
· Save: Overwrite an existing saved Style · Save As: Allow you to save Style and any additional changes as a new Style with a new name · Reset: Removes any additional styles changes applied to the saved style |
|
To save a style:
Change the desired font, border, and/or margin style.
Click Save, type in a style name in the pop-up window, then click OK.
The saved style can now be accessed in the Style section underneath Custom.
