Style Tab Options for Text, Radio, Checklist, Dropdown, Date, and Number Inputs
Description
LogicNets' frameworks contain existing templates that manage the look of your applications, allowing you to concentrate on modeling your content. However, you can also make adjustments to this formatting and styling using configurations in the editor Style tab, which is available on all form nodes. The Style tab contains the fields for setting style templates that allow you to control customized styling and template use and set your own cascading style sheets (CSS).
CSS is standardized web functionality that describes how a browser should display an application's HTML elements on screen. It allows you to control the styling of your application and is well documented on the internet. We do not provide details on how CSS works, but we do recommend the w3schools website as a starting point for you.
For information on configuring a custom CSS file for your LogicNets application, see Layering CSS and JS Files. We also recommend talking to your LogicNets Representative for an overview of how you can work LogicNets applications to meet your design and UI needs.
Style Tab Options
The table below details the different options available on the Style tab for form parts. Note that the field names are only shown for specific tabs as indicated in the "Applies To...." column. For additional information, see the LogicNets article on Part Templates.
| Field Name | Description/Use | Type/Options | Applies To |
| Part/element CSS class | This is the field where you can define an additional CSS style class that the system will apply to the input control. This is extremely useful, for example, if you have a specific field or style to implement on a subset of questions. An example project demonstrating this feature is available here (Release 7.4 +). |
Text | Data Object | All |
| Part/element template | This field contains the name of the default part template you assigned to this part type. Advanced users can define their own templates in an onstart logicnet and reference them here to generate alternative layouts on the screen. | Data Object | All |
| Option CSS class | This field is used for customized answer option templates. | Data Object | Radio, Checklist, Dropdown only |
| Option template | This field is used for customized answer option templates. | Data Object | Radio, Checklist, Dropdown only |
| Disable input | Check this box to prevent the user from being able to answer or change the question output. To disable based on conditions, see Disable input expression in the ADVANCED Tab. |
Yes | No
|
Radio, Checklist, Dropdown, Date Input only |
| Prefix template | not used | Text and Numeric Input only | |
| Postfix template | not used | Text and Numeric Input only | |
| Template container ID | not used | Text and Numeric Input only | |
| Width | Unless the width of a field is overwritten by other CSS settings, you can use this field to specify the width of the field on screen. | Number of pixels | Text Input only |
| Minimal width (in pixels) | This field is valid only for a multi-select dropdown menu. It defines what the minimal width in pixels of the dropdown should be. Note: When this is left empty, the system defaults the width to 225 pixels. Note: When your selected pixel width is wider than the than the minimum size and cannot be word-wrapped, the system will overflow the options outside ofthe drawn dropdown. |
Number of pixels | Text Input only |
| Height | Unless the height of a field is overwritten by other CSS settings, you can use this field to specify the height of the field on screen. | Number of pixels | Text Input only |
| Look and Feel | For dropdown menus, you can choose one of the following display options:
|
Regular | Hoverable | Dropdown only |
| Browser autofill | You can use this field to pass onto the browser a style type associated with the nature of the text. Examples include password, email, and telephone. The system defaults to auto. Note that not all browsers support all options presented. | Options | Text Input only |
| Default width (in pixels) (v8 on) |
This field defines the default display width (in pixels) of the input box when the dropdown is used for multi-selection (ie when the data type is set to collection). When this parameter is left blank, the width will default to 225 pixels. NOTE: When the text of the choices is wider than the default, you may see text wrapping and/or overflow on screen, unless other CSS has been included in the stylesheet to counter the effect. |
Number (pixels) | Multiselect Dropdown only |