Styling & Customization
CSS Classes
Core
| Class | Element | Purpose |
|---|
.gfr-repeat-group | Row wrapper | Grid container for each row |
.gfr-repeat-trigger | Container | Holds the Add button |
.gfr-actions | Container | Flex wrapper for row buttons |
.gfr-add-btn | Button | Add Row (blue border) |
.gfr-remove-btn | Button | Remove Row (red border) |
.gfr-copy-btn | Button | Copy Row (blue, Pro) |
.gfr-hidden | Any | Hidden at min/max limits |
Modules [Pro]
| Class | Purpose |
|---|
.gfr-row-header | Row header section |
.gfr-row-label | Row numbering text |
.gfr-drag-handle | Drag handle |
.gfr-collapse-btn | Collapse/expand toggle |
.gfr-collapsed | Applied when row is collapsed |
.gfr-dragging | During drag operation |
.gfr-drag-over | Drop target indicator |
.gfr-no-clone | Excluded from cloning |
Data Attributes
On .gfr-repeat-group:
| Attribute | Purpose |
|---|
data-group | Group name |
data-row-index | Row position (1+, absent on row 0) |
data-max-rows | Max row count |
data-min-rows | Min row count |
data-collapse | Collapse enabled |
data-draggable | Drag-reorder enabled |
data-row-label-tpl | Row numbering template |
data-max-rows-field | Dynamic max source field ID |
data-row-values | Sticky row values (JSON) |
Custom Styling Examples
Card-style rows
.gfr-repeat-group {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1rem;
}
Target specific groups
.gfr-repeat-group[data-group="passengers"] {
border-left: 3px solid #4f46e5;
}
.gfr-add-btn {
background: #4f46e5;
color: white;
border: none;
padding: 0.5rem 1.5rem;
border-radius: 4px;
}
Theme Compatibility
Works with both GF’s legacy markup and the Orbital theme framework. Only repeater-specific elements are styled.