You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 8 Next »

New Feature

This is a new feature in Joget DX 8.

Introduction

The Styles tab in the property editor is a new feature in DX8 that enables refined control of how an element (whether form element, list column or UI page component) would be viewed on either Desktop, Tablet or Mobile. The styles editor allows one to modify an element's CSS styling without the need to write CSS code (unless one uses the custom styling, more on this below)

Form Builder

The style tab in the Form Builder,  allows one to control how a page component is viewed by modifying an element's default style and the component's style component when it is hovered over by a cursor. There is also the option to specify which CSS classes should the element get its style from and the option to modify the position of the element's label.

Figure 1: Styles - Form Builder

List Builder

In the List Builder, the styles tab allows the user to control the styling of the list in 2 ways, modifying the list's body styling and its header styling. 

Figure 2: Styles - List Builder

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 it is hovered over by a cursor.  

Figure 3: Styles - UI Builder

Styling Modes

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

Device Styling

You can utilise the styles editor to change how an element is styled for multiple device types from the same configuration screen. The images below show how a text field form element is styled for Desktop and Mobile devices through the same property editor menu.

Figure 4: Styles - Styling for Desktop Devices

Figure 5: Styles - Styling for Mobile Devices

Text

Figure 6: Styles - Text

NameDescription
Font SizeEnter the text font size in em, px, percentage, rem or auto size.
Font ColorEnter the text's font color as a hex code or use the color picker to select the desired color.
Font Family

Select the text's font type. Available options are:

  • 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. Available options are : 

  • Default
  • Thin
  • Extra-Light
  • Light
  • Normal
  • Medium
  • Semi-Bold
  • Bold
  • Extra-Bold
  • Ultra-Bold
Line HeightEnter the text's line spacing height in em, px, percentage, rem or auto size.
Text Align

Choose the text's alignment. Available options are:

  • Default
  • Position Left 
  • Position Centre
  • Position Right
  • Justify
Letter SpacingEnter the spacing width between letters in em, px, percentage, rem or auto size.
Text Decoration ColorEnter 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. Available options are:

  • Default
  • None
  • Underline
  • Overline
  • Line Through
  • Underline & Overline
Text Decoration Style

Select the text's decoration style. Available options are:

  • Default
  • Solid
  • Wavy
  • Dotted
  • Dashed
  • Double

Background

Figure 7: Styles - Background

NameDescription
Background ImageUpload an image file that will be used as a background to the element.
Image PreviewShows a preview of the uploaded image.
Background ColorEnter 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. Available options are:

  • Default
  • Repeat X
  • Repeat Y
  • No Repeat
Background Size

Select the background size. Available options are:

  • Default
  • Contain
  • Cover
Background Position XEnter the background's horizontal position in em, px, percentage, rem or auto size.
Background Position YEnter the background's vertical position in em, px, percentage, rem or auto size.

Margin

Figure 8: Styles - Margin

NameDescription
Margin TopEnter the element's top margin in em, px, percentage, rem or auto size.
Margin LeftEnter the element's left margin in em, px, percentage, rem or auto size.
Margin RightEnter the element's right margin in em, px, percentage, rem or auto size.
Margin BottomEnter the element's bottom margin in em, px, percentage, rem or auto size.

Padding

Figure 9: Styles - Padding

NameDescription
Padding TopEnter the element's top padding in em, px, percentage, rem or auto size.
Padding LeftEnter the element's left padding in em, px, percentage, rem or auto size.
Padding RightEnter the element's right padding in em, px, percentage, rem or auto size.
Padding BottomEnter the element's bottom padding in em, px, percentage, rem or auto size.

Border

Figure 10: Styles - Border

NameDescription
Border StyleSelect the element's border style.
Border ColorEnter the element's color as a hex code or use the color picker to select the desired color
Border Top WidthEnter the element's top border width in em, px, percentage, rem or auto size.
Border Left WidthEnter the element's left border width in em, px, percentage, rem or auto size.
Border Right WidthEnter the element's right border width in em, px, percentage, rem or auto size.
Border Bottom WidthEnter the element's bottom border width in em, px, percentage, rem or auto size.
Border RadiusEnter the element's border radius in em, px, percentage, rem or auto size.

Display

Figure 11: Styles - Display

NameDescription
Display

Select the element's display style. Available options are:

  •  Default
  • Block
  • Inline
  • Inline Block
  • None
Position

Select the element's positioning type. Available options are:

  • Static
  • Fixed
  • Relative
  • Absolute
Position TopEnter the element's top positioning within the canvas in em, px, percentage, rem or auto size.
Position LeftEnter the element's left positioning within the canvas in em, px, percentage, rem or auto size.
Position RightEnter the element's right positioning within the canvas in em, px, percentage, rem or auto size.
Position BottomEnter the element's bottom positioning within the canvas in em, px, percentage, rem or auto size.
Float

Choose the element's positioning alignment. Available options are:

  • None
  • Position Left
  • Position Right

Size

Figure 12: Styles - Size

NameDescription
WidthEnter the element's desired width in em, px, percentage, rem or auto size.
HeightEnter the element's desired height in em, px, percentage, rem or auto size.
Min WidthEnter the element's minimum width in em, px, percentage, rem or auto size.
Min HeightEnter 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 HeightEnter the element's maximum height in em, px, percentage, rem or auto size.

Custom

Figure 13: Styles - Custom

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



  • No labels