UI Controls Styles

The Cascading Stylesheet (CSS) helps you control the look of pages and elements of your application. You can create multiple classes and define the class attributes as required. Using the default classes available in Studio or the custom styles that you create, you can apply different styles to the UI elements and pages.

Review the following recommendations for UI controls styling:

  • Create a new style class under My Styles to apply the custom styles to a UI control for the specific instance. The other instances of the same UI control remain as per the default style class. You can manually apply the custom style that you created to different instances of the same UI control as needed.
  • If you do not create a style class under My Styles but modify the properties under STYLES tab of any UI control, the changes are applied to all the instances of that UI control in all the pages across your UI model. This updates the default style class with the changes you applied. These changes cannot be undone.
  • The list of classes applied to the selected UI control are displayed in Class List under the Other Styles tab. You can edit the Class List enteing the values as string seperated by comma (,). You can delete the existing style class from the Other Styles and My Styles.
  • If you have created more than one style class for one UI control and wants to apply the same styling to other instances of that UI control, you must apply all the style classes that you created. You can use Class List to apply these custom styles.
  • The width, height and margins can be given either in pixels (px)or percentage (%). You can choose either pixels or percentage based on whether you want the UI controls with the same size across the devices or you want the UI controls appear in proportion to the device screen dimensions. Using the device view in UI model visual designer, you can adjust the values as required. It is recommended to specify separate values in pixels for each device type as the percentage values may not automatically adjust for different device types.
  • The devices option in the UI model visual designer provides the standard sizes of Desktop (998px), Tablet(768px) and Mobile(375px). If you want to test other screen sizes, you can use the 'Responsive' option in your browser settings.

Perform the following steps:

  1. Navigate to the UI Model that you want to update.
  2. Navigate to the view within your UI model that you want to update.
  3. Select the UI control that you want to modify for styles.
  4. Click the STYLES tab from the toolbar that appears on the right.

    5. The STYLES tab includes Other Styles and My Styles.

    • Other Styles: Displays all the default style classes available for the selected UI control. If you edit the styles of any UI control without creating a custom style class, the updates you make will overwrite the default style class and apply to all the instances of that UI control added in your UI model.
    • My Styles: Displays the custom style classes available for the selected UI control. If you have not already created custom style class, click + and enter a name to create the custom style class for the selected UI control. The custom style class is applicable only to the current instance of the selected UI control within in the current UI model. The other instances of the same UI control will still have the default style class applied. You can create a different custom style class for each instance of the same UI control.
  5. Modify the following attributes of selected UI control under the My Styles tab. These modifications will apply to the custom style class of the selected UI control. If custom style class is not created, the modification will apply to the default style class of the selected UI control.
    • Color: The color property specifies Text Color and Background Color settings for the selected UI control.
    • Size: The size property specifies Width and Height settings for the selected UI control.
    • Overflow: The overflow property specifies whether to clip or hide the content or to add scrollbars when the content of an element is too big to fit in the specified area. The overflow property has the following values:
      • visible - Default. The overflow is not clipped. The content renders outside the UI control.
      • hidden - The overflow is clipped and the rest of the content will be invisible.
      • scroll - The overflow is clipped and a scrollbar is added to see the rest of the content.
      • auto - Similar to scroll, but it adds scrollbars only when necessary.
    • Alignment: The alignment property specifies Text Alignment and Float settings for the selected UI control.
    • Margin: The margin property specifies Margin Top, Margin Right, Margin Bottom and Margin Left settings for the selected UI control.
    • Padding: Used to generate space around the content inside UI control. The padding can be specified for each side of an element using the following values:
      • px - Specifies a padding in Pixels.
      • % - Specifies a padding in Percentage of the width of the containing element.
      • vw - Specifies a padding in Viewport Width.
    • Position: The position property specifies the type of positioning method used for the selected UI control. You can then position the UI control using the top, bottom, left, and right properties.
    • Font The font property specifies Font Family, Font Size, Font Weight, Font Style and Font Decoration settings of the selected UI control.
    • Decorations: The decorations property specifies Border Radius, Border Width, Border Style, Border Color, Shadow, Shadow Color and Background settings for the selected UI control.
  6. Repeat steps 3 to 5 to modify the styles for each UI control and Save the UI model.

    7. The UI controls are modified for styles.