Skip to content

Fix and enhance checkbox and radio TV rendering #16782

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: 3.x
Choose a base branch
from
Open

Fix and enhance checkbox and radio TV rendering #16782

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1606717
FIx checkable TV type display
smg6511 Oct 29, 2025
105d204
Update radio.tpl
smg6511 Oct 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 48 additions & 1 deletion _build/templates/default/sass/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,7 +381,54 @@ input::-moz-focus-inner {
}

.x-form-field-wrap {
width: auto !important; /* make sure the wrap is always full width of parent, fixes some custom TVs */
/* make sure the wrap is always full width of parent, fixes some custom TVs */
width: auto !important;
}
}

.x-form-check-group,
.x-form-radio-group {
.x-column-inner {
width: unset !important;
display: flex;
flex-wrap: wrap;
text-wrap: nowrap;
gap: 0 2rem;
.x-column {
float: unset;
width: unset !important;
margin: 0 !important;
}
}
}

.wrap-columns {
.x-form-check-group,
.x-form-radio-group {
.x-column-inner {
text-wrap: balance;
.x-form-check-wrap {
width: unset !important;
}
.x-form-cb-label {
line-height: 1.2 !important;
}
}
}
&.column-width-narrow {
.x-column {
width: 80px !important;
}
}
&.column-width-medium {
.x-column {
width: 160px !important;
}
}
&.column-width-wide {
.x-column {
width: 240px !important;
}
}
}

Expand Down
12 changes: 12 additions & 0 deletions core/lexicon/en/tv_widget.inc.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,16 @@
$_lang['attr_target_desc'] = 'Indicates in which window/tab or frame the linked url should open. To target a specific frame, enter its name in place of one of the provided options.';
$_lang['capitalize'] = 'Capitalize';
$_lang['checkbox'] = 'Check Box';
$_lang['checkbox_column_direction'] = 'Column Direction';
$_lang['checkbox_column_direction_desc'] = 'Specifies whether checkbox options are arranged vertically (top to bottom) or horizontally (left to right). (Default: “Vertical”)';
$_lang['checkbox_column_width'] = 'Column Width';
$_lang['checkbox_column_width_desc'] = 'When Wrap Column Text is set to “Yes,” this sets a predefined width for this TV’s columns. (Default: “Medium”)';
$_lang['checkbox_columns'] = 'Columns';
$_lang['checkbox_columns_desc'] = 'The number of columns the checkboxes are displayed in.';
$_lang['checkbox_display_switch'] = 'Display as Switch';
$_lang['checkbox_display_switch_desc'] = 'When set to “Yes,” this TV’s inputs will be rendered in the Resource editing form as switches (toggles) instead of checked boxes. (Default: “No”)';
$_lang['checkbox_wrap_column_text'] = 'Wrap Column Text';
$_lang['checkbox_wrap_column_text_desc'] = 'When checkbox labels contain longer text, set to “Yes“ to show text on multiple lines. (Default: “No”)';
$_lang['class'] = 'Class';
$_lang['classes'] = 'Class(es)';
$_lang['combo_allowaddnewdata'] = 'Allow Add New Items';
Expand Down Expand Up @@ -142,8 +148,14 @@
$_lang['number_minvalue'] = 'Min Value';
$_lang['option'] = 'Radio Options';
$_lang['parent_resources'] = 'Parent Resources';
$_lang['radio_column_direction'] = $_lang['checkbox_column_direction'];
$_lang['radio_column_direction_desc'] = 'Specifies whether radio button options are arranged vertically (top to bottom) or horizontally (left to right). (Default: “Vertical”)';
$_lang['radio_column_width'] = $_lang['checkbox_column_width'];
$_lang['radio_column_width_desc'] = $_lang['checkbox_column_width_desc'];
$_lang['radio_columns'] = 'Columns';
$_lang['radio_columns_desc'] = 'The number of columns the radio buttons are displayed in.';
$_lang['radio_wrap_column_text'] = $_lang['checkbox_wrap_column_text'];
$_lang['radio_wrap_column_text_desc'] = 'When radio button labels contain longer text, set to “Yes“ to show text on multiple lines. (Default: “No”)';
$_lang['rawtext'] = 'Raw Text (deprecated)';
$_lang['rawtextarea'] = 'Raw Textarea (deprecated)';
$_lang['required'] = 'Allow Blank';
Expand Down
117 changes: 114 additions & 3 deletions core/src/Revolution/Processors/Element/TemplateVar/Configs/mgr/inputproperties/checkbox.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,18 @@
# Set values
$columns = !empty($params['columns']) ? $params['columns'] : 1 ;
$displayAsSwitch = $params['displayAsSwitch'] === 'true' || $params['displayAsSwitch'] == 1 ? 'true' : 'false' ;
$columnDirection = !empty($params['columnDirection']) ? $params['columnDirection'] : 'vertical' ;
$columnWidth = !empty($params['columnWidth']) ? $params['columnWidth'] : 'medium' ;
$wrapColumnText = $params['wrapColumnText'] === 'true' || $params['wrapColumnText'] == 1 ? 'true' : 'false' ;

# Set help descriptions
$descKeys = [
'required_desc',
'checkbox_columns_desc',
'checkbox_display_switch_desc'
'checkbox_display_switch_desc',
'checkbox_column_direction_desc',
'checkbox_wrap_column_text_desc',
'checkbox_column_width_desc'
];
$this->setHelpContent($descKeys, $expandHelp);

Expand All @@ -37,7 +43,7 @@
},
items: [
{
columnWidth: 0.34,
columnWidth: 0.33,
defaults: {
anchor: '100%',
msgTarget: 'under'
Expand Down Expand Up @@ -79,7 +85,7 @@
}]
},
{
columnWidth: 0.33,
columnWidth: 0.34,
defaults: {
anchor: '100%',
msgTarget: 'under'
Expand All @@ -101,6 +107,111 @@
}]
}
]
},
{
defaults: {
xtype: 'panel',
layout: 'form',
labelAlign: 'top',
autoHeight: true,
labelSeparator: ''
},
items: [
{
columnWidth: .33,
defaults: {
anchor: '100%',
msgTarget: 'under'
},
items: [{
xtype: 'combo',
fieldLabel: _('checkbox_column_direction'),
description: {$this->helpContent['eh_checkbox_column_direction_desc']},
name: 'inopt_columnDirection',
hiddenName: 'inopt_columnDirection',
id: 'inopt_columnDirection{$tvId}',
mode: 'local',
store: new Ext.data.ArrayStore({
fields: [
'value',
'label'
],
data: [
['vertical', 'Vertical'],
['horizontal', 'Horizontal']
]
}),
valueField: 'value',
displayField: 'label',
triggerAction: 'all',
editable: false,
value: '{$columnDirection}'
},{
xtype: '{$helpXtype}',
forId: 'inopt_columnDirection{$tvId}',
html: {$this->helpContent['checkbox_column_direction_desc']},
cls: 'desc-under'
}]
},
{
columnWidth: 0.33,
defaults: {
anchor: '100%',
msgTarget: 'under'
},
items: [{
xtype: 'combo',
fieldLabel: _('checkbox_column_width'),
description: {$this->helpContent['eh_checkbox_column_width_desc']},
name: 'inopt_columnWidth',
hiddenName: 'inopt_columnWidth',
id: 'inopt_columnWidth{$tvId}',
mode: 'local',
store: new Ext.data.ArrayStore({
fields: [
'value',
'label'
],
data: [
['narrow', 'Narrow'],
['medium', 'Medium'],
['wide', 'Wide']
]
}),
valueField: 'value',
displayField: 'label',
triggerAction: 'all',
editable: false,
value: '{$columnWidth}'
},{
xtype: '{$helpXtype}',
forId: 'inopt_columnWidth{$tvId}',
html: {$this->helpContent['checkbox_column_width_desc']},
cls: 'desc-under'
}]
},
{
columnWidth: 0.34,
defaults: {
anchor: '100%',
msgTarget: 'under'
},
items: [{
xtype: 'combo-boolean',
fieldLabel: _('checkbox_wrap_column_text'),
description: {$this->helpContent['eh_checkbox_wrap_column_text_desc']},
name: 'inopt_wrapColumnText',
hiddenName: 'inopt_wrapColumnText',
id: 'inopt_wrapColumnText{$tvId}',
value: {$wrapColumnText}
},{
xtype: '{$helpXtype}',
forId: 'inopt_wrapColumnText{$tvId}',
html: {$this->helpContent['checkbox_wrap_column_text_desc']},
cls: 'desc-under'
}]
}
]
}
]
OPTSJS;
Expand Down
Loading