Customize form appearance and behavior using CSS classes for Variable Groups and Variables in Studytrax.
Overview of New CSS Functionality
The Variable API now provides extensive CSS customization capabilities that transform how forms look and behave without requiring code changes:
Key Enhancements
- Control Transformations - Convert standard inputs into specialized controls (combo boxes, photo capture, sliders)
- Responsive Grid System - Create complex multi-column layouts with 1-10 column grids
- Dynamic Theming - Apply contextual colors to indicate status, importance, or categorization
- Precise Positioning - Control exact placement with percentage and pixel-based sizing
- Interactive Features - Enable immediate updates, custom visibility rules, and conditional styling
- Matrix Layouts - Build table-based forms for rating scales and comparative data entry
These CSS classes work together to create professional, accessible forms that adapt to different devices and user needs.
Variable Group Classes
| Class |
Description |
fullscreen |
Expands form to fill entire screen, removing navigation and maximizing data entry space |
matrix |
Transforms form into table layout with questions as rows and responses as columns |
grid-layout-[1-10] |
Creates responsive column grid (1-10 columns) that automatically reflows on smaller screens |
cell-borders |
Adds visual borders between grid cells to clearly separate form sections |
Variable Classes - Layout & Structure
Basic Layout Options
| Class |
Description |
horizontal |
Places prompt beside control instead of above, saving vertical space |
heading |
Creates prominent section divider with large bold text (1.5em) and no input |
no-control |
Displays only the prompt text, useful for instructions or read-only information |
border |
Adds visual border around entire question to group related content |
reverse-prompt-and-control |
Positions control before prompt, useful for checkboxes and custom layouts |
Width & Sizing Control
| Class |
Description |
width-[1-100] |
Sets element width as percentage of container (1% to 100%) |
width-[50-1000]px |
Fixed pixel width in 50px increments for precise control |
width-33-33 |
Exactly one-third width for three-column layouts |
width-xs/sm/md/lg/xl |
Responsive named sizes (125px/250px/500px/750px/1000px) |
Positioning & Spacing
| Class |
Description |
offset-left-[1-100] |
Adds left margin as percentage for indentation or alignment |
offset-right-[1-100] |
Adds right margin as percentage for spacing from right edge |
offset-left/right-[50-1000]px |
Fixed pixel offsets in 50px increments |
indent-[1-10] |
Progressive left padding in 4em increments for hierarchical display |
no-margin-control |
Removes all default margins for compact, tight layouts |