Versions Compared

Old Version 2

changes.mady.by.user Ismat

Saved on

compared with

New Version 3

changes.mady.by.user Ismat

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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 the an element's default style of the element and the component's style of the 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.

...

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 of the element and the component's style of the component when it is hovered over by a cursor.  

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 (See figure 4).

Tip
titleTip

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

Text

Image Added

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

Image Added

NameDescription
Background Image
Image Preview
Background Color
Background Repeat
Background Size
Background Position X
Background Position Y

Margin

Image Added

NameDescription
Margin Top
Margin Left
Margin Right
Margin Bottom

Padding

Image Added

NameDescription
Padding Top
Padding Left
Padding Right
Padding Bottom

Border

Image Added

NameDescription
Border Style
Border Color
Border Top Width
Border Left Width
Border Right Width
Border Bottom Width
Border Radius

Display

Image Added

NameDescription
Display
Position
Position Top
Position Left
Position Right
Position Bottom
Float

Size

Image Added

NameDescription
Width
Height
Min Width
Min Height
Max Width
Max Height

Custom

Image Added

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