Styles

The Styles tab in the property editor in Joget DX 8 enhances control over how elements are viewed on Desktop, Tablet, or Mobile. It allows users to modify an element's CSS styling without writing CSS code unless custom styling is required.

Form Builder

The Form Builder features a property editor that simplifies modifying form element properties.

Default styling

• Configure the field label position for all fields to either be in the top or left position.
• Supported default styling for form, section, section header, field label, field input, and field label position.
• Each element's specific styling can override the default styling.

The style tab allows control over a page component's default style and the component's style when hovered over by a cursor. Users can specify which CSS classes should style the element and modify the element's label position.

List Builder

In the List Builder, the styles tab allows control over the list's body and header styling.

UI Builder

Similarly to the Form Builder, the styles tab in the UI builder allows one to control how a page component is viewed by modifying the element's default style and the component's style when a cursor hovers over it.  

Styling Modes

There are 8 styling options available across the Form, List, and UI builders. These can be accessed under the styling configurations in the property editor.

Device Styling

Modify how an element is styled for different device types from the same configuration screen.

The images below show how a text field form element is styled for desktop and mobile devices using the same property editor menu.

• Styling for Desktop Devices
  

• Styling for Mobile Devices
  
  
  
  

Text

To configure Text, drag and drop an element onto the canvas in Builders,  click on it, and select Styles.

When adding Text in the field Default Mode, you will see the following fields available for configuration:

• Font Size: Enter the text font size in em, px, percentage, rem, or auto size.
• Font Color: Enter the text's font color as a hex code or use the color picker.
• Font Family: Select the text's font type.
  
  • Default
  • Arial
  • Lucida Grande
  • Palatino Linotype
  • Times New Roman
  • Georgia, serif
  • Tahoma
  • Comic Sans
  • Verdana
  • Impact
  • Arial Black
  • Trebuchet
  • Courier New
  • Brush Script
• Font Weight: Select the text's font weight.
  • Default
  • Thin
  • Extra-Light
  • Light
  • Normal
  • Medium
  • Semi-Bold
  • Bold
  • Extra-Bold
  • Ultra-Bold
• Line Height: Enter the text's line spacing height in em, px, percentage, rem or auto size.
• Text Align: Choose the text's alignment.
  • Default
  • Position Left 
  • Position Centre
  • Position Right
  • Justify
• Letter Spacing: Enter the spacing width between letters in em, px, percentage, rem, or auto size.
• Text Decoration Color: Enter the text's decoration color as a hex code or use the color picker to select the desired color.
• Text Decoration: Select the text's decoration.
  • Default
  • None
  • Underline
  • Overline
  • Line Through
  • Underline & Overline
• Text Decoration Style: Select the text's decoration style.
  • Default
  • Solid
  • Wavy
  • Dotted
  • Dashed
  • Double

Background

To configure Background, drag and drop an element onto the canvas in Builders,  click on it, and select Styles.

When adding Background in the field Default Mode, you will see the following fields available for configuration:

• Background Image: Upload an image file that will be used as a background to the element.
• Image Preview: Shows a preview of the uploaded image.
• Background Color: Enter the element's background color as a hex code or use the color picker to select the desired color.
• Background Repeat: Select the method of repeating the background image.
  
  • Default
  • Repeat X
  • Repeat Y
  • No Repeat
• Background Size: Select the background size.
  
  • Default
  • Contain
  • Cover
• Background Position X: Enter the background's horizontal position in em, px, percentage, rem, or auto size.
• Background Position Y: Enter the background's vertical position in em, px, percentage, rem, or auto size.

Margin

To configure Margin, drag and drop an element onto the canvas in Builders,  click on it, and select Styles.

When adding Margin in the field Default Mode, you will see the following fields available for configuration:

• Margin Top: Enter the element's top margin in em, px, percentage, rem, or auto size.
• Margin Left: Enter the element's left margin in em, px, percentage, rem, or auto size.
• Margin Right: Enter the element's right margin in em, px, percentage, rem, or auto size.
• Margin Bottom: Enter the element's bottom margin in em, px, percentage, rem, or auto size.

Padding

To configure Padding, drag and drop an element onto the canvas in Builders,  click on it, and select Styles.

When adding Padding in the field Default Mode, you will see the following fields available for configuration:

• Padding Top: Enter the element's top padding in em, px, percentage, rem, or auto size.
• Padding Left: Enter the element's left padding in em, px, percentage, rem, or auto size.
• Padding Right: Enter the element's right padding in em, px, percentage, rem, or auto size.
• Padding Bottom: Enter the element's bottom padding in em, px, percentage, rem, or auto size.

Border

To configure Border, drag and drop an element onto the canvas in Builders,  click on it, and select Styles.

When adding Border in the field Default Mode, you will see the following fields available for configuration:

• Border Style: Select the element's border style.
• Border Color: Enter the element's color as a hex code or use the color picker to select the desired color.
• Border Top Width: Enter the element's top border width in em, px, percentage, rem, or auto size.
• Border Left Width: Enter the element's left border width in em, px, percentage, rem, or auto size.
• Border Right Width: Enter the element's right border width in em, px, percentage, rem, or auto size.
• Border Bottom Width: Enter the element's bottom border width in em, px, percentage, rem, or auto size.
• Border Radius: Enter the element's border radius in em, px, percentage, rem, or auto size.

Display

To configure Display, drag and drop an element onto the canvas in Builders,  click on it, and select Styles.

When adding Display in the field Default Mode, you will see the following fields available for configuration:

• Display: Select the display style.
  •  Default
  • Block
  • Inline
  • Inline Block
  • None
• Position: Select the positioning type.
  • Static
  • Fixed
  • Relative
  • Absolute
• Position Top: Enter the element's top positioning within the canvas in em, px, percentage, rem, or auto size.
• Position Left: Enter the element's left positioning within the canvas in em, px, percentage, rem, or auto size.
• Position Right: Enter the element's right positioning within the canvas in em, px, percentage, rem, or auto size.
• Position Bottom: Enter the element's bottom positioning within the canvas in em, px, percentage, rem, or auto size.
• Float: Choose the positioning alignment.
  • None
  • Position Left
  • Position Right

Size

To configure Size, drag and drop an element onto the canvas in Builders,  click on it, and select Styles.

When adding Size in the field Default Mode, you will see the following fields available for configuration:

• Width: Enter the element's desired width in em, px, percentage, rem, or auto size.
• Height: Enter the element's desired height in em, px, percentage, rem, or auto size.
• Min Width: Enter the element's minimum width in em, px, percentage, rem, or auto size.
• Min Height: Enter the element's minimum height in em, px, percentage, rem, or auto size.
• Max Width: Enter the element's maximum width in em, px, percentage, rem, or auto size.
• Max Height: Enter the element's maximum height in em, px, percentage, rem, or auto size.

Custom

To configure Custom, drag and drop an element onto the canvas in Builders,  click on it, and select Styles.

When adding Custom in the field Default Mode, you will see the following field available for configuration:

• Custom: The Custom Styling option allows you to write custom CSS code to determine the element's styling.