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 form nodes. The Style tab contains the fields 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 an application's HTML elements should be displayed 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.
The article on configuring a custom CSS file for your LogicNets application can be found here.
We recommend connecting to your LogicNets Representative to get an overview of how LogicNets applications can be styled to meet your design and UI needs.
Style Tab Options
The table below shows which Field Name options are available for different node types in the Style tab. Note that the field names are only visible for specific nodes as indicated in the "Applies To" column. (For example, the Part/element CSS class option is visible for all node types, while Option CSS class only applies to radio, checklist and dropdowns). For additional information, see the LogicNets article on Part Templates.
| Field Name | Description/Use | Type/Options | Available Node Types |
| 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 | [tba] | Data Object | Text and Numeric Input only |
| Postfix template | [tba] | Data Object | Text and Numeric Input only |
| Template container ID | [tba] | ||
| 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 |