Skip to content

Commit c394e1e

Browse files
smg6511opengeek
smg6511
and
opengeek
authored
Fix and enhance checkbox and radio TV rendering (#16782)
### What does it do? Updated css and added new input properties to the two TV types to give users better control over their display, particularly for multi-column rendering. The new properties added are: - Column Direction - Column Width - Wrap Column Text <img width="500" alt="Chooser Opts" src="https://github.com/user-attachments/assets/58490ae5-5135-413a-9e0a-a6167604fb8d" /> ### Why is it needed? When these TV types are set to more than one column, their options can overlap visually when their text is longer than just a couple/few words. Extjs 3 has a known issue with how it calculates the column widths and, because it inlines those widths on render, it can be difficult to control the problem outside of the core. Fixing that in Ext via overrides is more trouble than it's worth, so I elected to unset the hard-coded widths and provide some general controls to improve the layout of these TVs. Before this fix: <img width="500" alt="Before 1" src="https://github.com/user-attachments/assets/58af55e6-82ff-4691-837d-d662e89ac479" /> After this fix (just a couple sample configs): <img width="500" alt="After 1" src="https://github.com/user-attachments/assets/8bf1c731-2b12-4306-8f5d-883caad7590a" /> <img width="500" alt="After 2" src="https://github.com/user-attachments/assets/1f818a9a-92cb-4b96-8684-c29d04a284b5" /> <img width="500" alt="After 3" src="https://github.com/user-attachments/assets/db418436-916e-42c0-ac12-7bb125c51c83" /> ### How to test 1. Create a couple multi-column TVs (a radio and a checkbox) and play with the new properties, giving each TV varying lengths of text in their options. 2. Verify that there's no overlap between columns. ### Related issue(s)/PR(s) I believe I saw something in the Community thread on Slack that alerted me to the problem; there doesn't seem to be an Issue posted on GitHub though. **Update:** Resolves #16801 - The issue was just posted by a user today (12/19). --------- Co-authored-by: Jason Coward <jason@opengeek.com>
1 parent 37d92fc commit c394e1e

File tree

8 files changed

+357
-33
lines changed

8 files changed

+357
-33
lines changed

‎_build/templates/default/sass/_forms.scss‎

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -381,7 +381,54 @@ input::-moz-focus-inner {
381381
}
382382

383383
.x-form-field-wrap {
384-
width: auto !important; /* make sure the wrap is always full width of parent, fixes some custom TVs */
384+
/* make sure the wrap is always full width of parent, fixes some custom TVs */
385+
width: auto !important;
386+
}
387+
}
388+
389+
.x-form-check-group,
390+
.x-form-radio-group {
391+
.x-column-inner {
392+
width: unset !important;
393+
display: flex;
394+
flex-wrap: wrap;
395+
text-wrap: nowrap;
396+
gap: 0 2rem;
397+
.x-column {
398+
float: unset;
399+
width: unset !important;
400+
margin: 0 !important;
401+
}
402+
}
403+
}
404+
405+
.wrap-columns {
406+
.x-form-check-group,
407+
.x-form-radio-group {
408+
.x-column-inner {
409+
text-wrap: balance;
410+
.x-form-check-wrap {
411+
width: unset !important;
412+
}
413+
.x-form-cb-label {
414+
line-height: 1.2 !important;
415+
}
416+
}
417+
}
418+
&.column-width-narrow {
419+
.x-column {
420+
width: 80px !important;
421+
}
422+
}
423+
&.column-width-medium {
424+
.x-column {
425+
width: 160px !important;
426+
}
427+
}
428+
&.column-width-wide {
429+
.x-column {
430+
width: 240px !important;
431+
}
385432
}
386433
}
387434

‎core/lexicon/en/tv_widget.inc.php‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,16 @@
1717
$_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.';
1818
$_lang['capitalize'] = 'Capitalize';
1919
$_lang['checkbox'] = 'Check Box';
20+
$_lang['checkbox_column_direction'] = 'Column Direction';
21+
$_lang['checkbox_column_direction_desc'] = 'Specifies whether checkbox options are arranged vertically (top to bottom) or horizontally (left to right). (Default: “Vertical”)';
22+
$_lang['checkbox_column_width'] = 'Column Width';
23+
$_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”)';
2024
$_lang['checkbox_columns'] = 'Columns';
2125
$_lang['checkbox_columns_desc'] = 'The number of columns the checkboxes are displayed in.';
2226
$_lang['checkbox_display_switch'] = 'Display as Switch';
2327
$_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”)';
28+
$_lang['checkbox_wrap_column_text'] = 'Wrap Column Text';
29+
$_lang['checkbox_wrap_column_text_desc'] = 'When checkbox labels contain longer text, set to “Yes“ to show text on multiple lines. (Default: “No”)';
2430
$_lang['class'] = 'Class';
2531
$_lang['classes'] = 'Class(es)';
2632
$_lang['combo_allowaddnewdata'] = 'Allow Add New Items';
@@ -142,8 +148,14 @@
142148
$_lang['number_minvalue'] = 'Min Value';
143149
$_lang['option'] = 'Radio Options';
144150
$_lang['parent_resources'] = 'Parent Resources';
151+
$_lang['radio_column_direction'] = $_lang['checkbox_column_direction'];
152+
$_lang['radio_column_direction_desc'] = 'Specifies whether radio button options are arranged vertically (top to bottom) or horizontally (left to right). (Default: “Vertical”)';
153+
$_lang['radio_column_width'] = $_lang['checkbox_column_width'];
154+
$_lang['radio_column_width_desc'] = $_lang['checkbox_column_width_desc'];
145155
$_lang['radio_columns'] = 'Columns';
146156
$_lang['radio_columns_desc'] = 'The number of columns the radio buttons are displayed in.';
157+
$_lang['radio_wrap_column_text'] = $_lang['checkbox_wrap_column_text'];
158+
$_lang['radio_wrap_column_text_desc'] = 'When radio button labels contain longer text, set to “Yes“ to show text on multiple lines. (Default: “No”)';
147159
$_lang['rawtext'] = 'Raw Text (deprecated)';
148160
$_lang['rawtextarea'] = 'Raw Textarea (deprecated)';
149161
$_lang['required'] = 'Allow Blank';

‎core/src/Revolution/Processors/Element/TemplateVar/Configs/mgr/inputproperties/checkbox.php‎

Lines changed: 114 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,18 @@
1616
# Set values
1717
$columns = !empty($params['columns']) ? $params['columns'] : 1 ;
1818
$displayAsSwitch = $params['displayAsSwitch'] === 'true' || $params['displayAsSwitch'] == 1 ? 'true' : 'false' ;
19+
$columnDirection = !empty($params['columnDirection']) ? $params['columnDirection'] : 'vertical' ;
20+
$columnWidth = !empty($params['columnWidth']) ? $params['columnWidth'] : 'medium' ;
21+
$wrapColumnText = $params['wrapColumnText'] === 'true' || $params['wrapColumnText'] == 1 ? 'true' : 'false' ;
1922

2023
# Set help descriptions
2124
$descKeys = [
2225
'required_desc',
2326
'checkbox_columns_desc',
24-
'checkbox_display_switch_desc'
27+
'checkbox_display_switch_desc',
28+
'checkbox_column_direction_desc',
29+
'checkbox_wrap_column_text_desc',
30+
'checkbox_column_width_desc'
2531
];
2632
$this->setHelpContent($descKeys, $expandHelp);
2733

@@ -37,7 +43,7 @@
3743
},
3844
items: [
3945
{
40-
columnWidth: 0.34,
46+
columnWidth: 0.33,
4147
defaults: {
4248
anchor: '100%',
4349
msgTarget: 'under'
@@ -79,7 +85,7 @@
7985
}]
8086
},
8187
{
82-
columnWidth: 0.33,
88+
columnWidth: 0.34,
8389
defaults: {
8490
anchor: '100%',
8591
msgTarget: 'under'
@@ -101,6 +107,111 @@
101107
}]
102108
}
103109
]
110+
},
111+
{
112+
defaults: {
113+
xtype: 'panel',
114+
layout: 'form',
115+
labelAlign: 'top',
116+
autoHeight: true,
117+
labelSeparator: ''
118+
},
119+
items: [
120+
{
121+
columnWidth: .33,
122+
defaults: {
123+
anchor: '100%',
124+
msgTarget: 'under'
125+
},
126+
items: [{
127+
xtype: 'combo',
128+
fieldLabel: _('checkbox_column_direction'),
129+
description: {$this->helpContent['eh_checkbox_column_direction_desc']},
130+
name: 'inopt_columnDirection',
131+
hiddenName: 'inopt_columnDirection',
132+
id: 'inopt_columnDirection{$tvId}',
133+
mode: 'local',
134+
store: new Ext.data.ArrayStore({
135+
fields: [
136+
'value',
137+
'label'
138+
],
139+
data: [
140+
['vertical', 'Vertical'],
141+
['horizontal', 'Horizontal']
142+
]
143+
}),
144+
valueField: 'value',
145+
displayField: 'label',
146+
triggerAction: 'all',
147+
editable: false,
148+
value: '{$columnDirection}'
149+
},{
150+
xtype: '{$helpXtype}',
151+
forId: 'inopt_columnDirection{$tvId}',
152+
html: {$this->helpContent['checkbox_column_direction_desc']},
153+
cls: 'desc-under'
154+
}]
155+
},
156+
{
157+
columnWidth: 0.33,
158+
defaults: {
159+
anchor: '100%',
160+
msgTarget: 'under'
161+
},
162+
items: [{
163+
xtype: 'combo',
164+
fieldLabel: _('checkbox_column_width'),
165+
description: {$this->helpContent['eh_checkbox_column_width_desc']},
166+
name: 'inopt_columnWidth',
167+
hiddenName: 'inopt_columnWidth',
168+
id: 'inopt_columnWidth{$tvId}',
169+
mode: 'local',
170+
store: new Ext.data.ArrayStore({
171+
fields: [
172+
'value',
173+
'label'
174+
],
175+
data: [
176+
['narrow', 'Narrow'],
177+
['medium', 'Medium'],
178+
['wide', 'Wide']
179+
]
180+
}),
181+
valueField: 'value',
182+
displayField: 'label',
183+
triggerAction: 'all',
184+
editable: false,
185+
value: '{$columnWidth}'
186+
},{
187+
xtype: '{$helpXtype}',
188+
forId: 'inopt_columnWidth{$tvId}',
189+
html: {$this->helpContent['checkbox_column_width_desc']},
190+
cls: 'desc-under'
191+
}]
192+
},
193+
{
194+
columnWidth: 0.34,
195+
defaults: {
196+
anchor: '100%',
197+
msgTarget: 'under'
198+
},
199+
items: [{
200+
xtype: 'combo-boolean',
201+
fieldLabel: _('checkbox_wrap_column_text'),
202+
description: {$this->helpContent['eh_checkbox_wrap_column_text_desc']},
203+
name: 'inopt_wrapColumnText',
204+
hiddenName: 'inopt_wrapColumnText',
205+
id: 'inopt_wrapColumnText{$tvId}',
206+
value: {$wrapColumnText}
207+
},{
208+
xtype: '{$helpXtype}',
209+
forId: 'inopt_wrapColumnText{$tvId}',
210+
html: {$this->helpContent['checkbox_wrap_column_text_desc']},
211+
cls: 'desc-under'
212+
}]
213+
}
214+
]
104215
}
105216
]
106217
OPTSJS;

0 commit comments

Comments
 (0)