Style Input Variants

Business Background

Style the input variants using Titan Web.

Titan Solution

• The Input Variant option is available for project styling.
• The Input Variant option allows you to change the element’s look and inherit styles from elements except for their size. You can use the primary properties to change the element color and the size to adjust the width and height.

How to Video

Video Coming Soon!

How to Guide

1. Select the Project drop-down list.
2. Select the Style option and select the Configure sub-option. The Customize Styles screen opens.

3. Expand the Simple Elements option. A drop-down list opens.
4. Select the Input Variant option to expand it.
5. Use these controls to customize the styles for the input variants.
   • Input Variant
     • Text Field Variant
     • Size Variant
   • Primary
   • Size

6. Select the Text Field Variant drop-down list and choose the following style options:
   • Select the Standard option for a basic or common look of elements.
   • Select the Filled option for a color-filled look of elements.
   • Select the Outline option for an object’s shape in a sketch or diagram look of elements.
   • Select the Fixed option for the securely in-position look of elements.
   • Select the Classic option for a classic quality look of elements.

7. Select the Size Variant to adjust the height and width of the element.

8. Select the Primary option to change the color of the element.

9. Select the Size option to adjust element’s width or height.
10. Select the Advanced option to adjust the following:
    • Select the Inherit from styles checkbox to copy styles from other elements. This option is selected by default. You can deselect the checkbox and adjust the element width and height manually and keep the inherited style of the element.
    • Select the the Auto-resize height checkbox to remove unnecessary spacing between elements height when working with a multiple elements. You can use this option to auto-fit your content.
    • Select the Auto-resize width checkbox to remove unnecessary spacing on the width of the element, for instance, when you drag the Title element to the canvas, there is an extra space after the text. You can use this option to auto-fit your content.
    • You can manually adjust the minimum and maximum height and width sizes.