Skip to content

Commit b780a3d

Browse files
smg6511opengeek
smg6511
and
opengeek
authored
Fix TV render sizing for non-TV panels (#16819)
### What does it do? Implement more reliable and flexible sizing specs via updated css, removing explicit widths from Ext configs. The changes allow every built-in TV type to display correctly, no matter where they are placed. ### Why is it needed? Many TV types do not render well when moved to the various Resource regions, overflowing the region boundaries. In some cases the inner input (holding the current value) also obscured the right border because of incorrect sizing. ### How to test 1. Run `grunt build` while in the `_build/templates/default` folder 2. Create each TV type (two of each if wanting to test the render to the TV panel and to Resource regions at the same time) 3. Setup Form Customization to move each TV type to one of the Resource regions. 4. Verify width and general sizing is consistent with other built-in fields as well as among moved TVs ### Related issue(s)/PR(s) Resolves #12839 and #13977 ### Special Note More work could be done to improve the styling overall (_e.g._, maybe more space vertically between fields, fine-tuning spacing and sizing of the descriptions/labels, etc.) and I did not focus much on the mobile view as there are problems to fix there beyond TV rendering which are out of scope of this fix. --------- Co-authored-by: Jason Coward <jason@opengeek.com>
1 parent 02dc122 commit b780a3d

18 files changed

Lines changed: 160 additions & 78 deletions

File tree

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

Lines changed: 89 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,85 @@ input::-moz-focus-inner {
199199
/* label.x-form-item-label */
200200

201201
&.modx-tv {
202-
padding: 0 0 0 0 !important;
202+
padding: 0 !important;
203+
.x-form-text,
204+
.x-form-textarea {
205+
// Note that .x-form-text is found in two places structurally, so do not combine this with the one below
206+
box-sizing: border-box;
207+
min-height: var(--modx-mgr-field-height-min);
208+
padding: var(--modx-mgr-field-padding);
209+
width: 100% !important;
210+
}
211+
.x-form-field-wrap {
212+
// This is typically going to wrap a field with trigger
213+
width: 100% !important;
214+
box-sizing: border-box;
215+
.x-form-text {
216+
max-width: calc(100% - var(--modx-mgr-field-trigger-width));
217+
}
218+
}
219+
220+
// Trigger fields
221+
&.modx-tv-type-resourcelist,
222+
&.modx-tv-type-listbox-multiple,
223+
&.modx-tv-type-listbox,
224+
&.modx-tv-type-image,
225+
&.modx-tv-type-file,
226+
&.modx-tv-type-date,
227+
// Non-trigger fields
228+
&.modx-tv-type-number {
229+
max-width: var(--modx-mgr-field-tv-component-width-max);
230+
}
231+
&.modx-tv-type-date {
232+
.x-datetime-wrap {
233+
> table {
234+
width: 100%;
235+
td {
236+
width: 50%;
237+
}
238+
}
239+
}
240+
}
241+
&.modx-tv-type-richtext {
242+
max-width: unset;
243+
}
244+
&.modx-tv-type-listbox-multiple {
245+
.x-form-field-wrap {
246+
box-sizing: content-box;
247+
border-color: #fff;
248+
.x-form-text {
249+
max-width: 100%;
250+
border: 1px solid $borderColor;
251+
&.x-form-focus {
252+
border-color: $mediumGray;
253+
}
254+
ul {
255+
width: 100% !important;
256+
max-width: calc(100%
257+
- (var(--modx-mgr-field-trigger-width) * 2)
258+
+ var(--modx-mgr-field-padding)
259+
);
260+
}
261+
}
262+
}
263+
}
264+
&.modx-tv-type-url {
265+
.x-form-field-wrap {
266+
width: var(--modx-mgr-field-tv-url-protocol-width) !important;
267+
.x-form-text {
268+
// This is the protocol select
269+
}
270+
}
271+
.textfield {
272+
// This is the url field text input
273+
width: calc(100%
274+
- var(--modx-mgr-field-tv-url-protocol-width)
275+
- 4px
276+
) !important;
277+
min-height: calc(var(--modx-mgr-field-height-min) + 2px);
278+
padding: var(--modx-mgr-field-padding);
279+
}
280+
}
203281
}
204282

205283
/* is outside of the label */
@@ -670,7 +748,7 @@ input::-moz-focus-inner {
670748
border-radius: 0 calc($borderRadius - 1px) calc($borderRadius - 1px) 0; /* override button styles border-radius */
671749
box-shadow: none; /* override button styles box-shadow */
672750
padding: 0; /* override button styles padding */
673-
width: 30px;
751+
width: var(--modx-mgr-field-trigger-width);
674752
height: 100% !important; /* height 100% to enable vertical centering, !important to override default extjs theme styles */
675753
position: absolute;
676754
top: 0;
@@ -804,21 +882,6 @@ input::-moz-focus-inner {
804882

805883
}
806884

807-
.modx-tv-type-listbox-multiple {
808-
809-
.x-form-field-wrap {
810-
border-color: #fff;
811-
.x-form-text {
812-
border: 1px solid $borderColor;
813-
margin: -1px;
814-
&.x-form-focus {
815-
border-color: $mediumGray;
816-
}
817-
}
818-
}
819-
}
820-
821-
822885
#x-form-el-modx-user-photo .x-form-file-trigger:before {
823886
content: fa-content($fa-var-file-image);
824887
}
@@ -1096,10 +1159,10 @@ input::-moz-focus-inner {
10961159
height: auto !important; /* override the extjs default theme style of 18px */
10971160
margin: 0;
10981161
outline: 0;
1099-
padding: 0 5px 5px 5px; /* special padding because selected items need margin-top */
1162+
padding: 0 var(--modx-mgr-field-padding) var(--modx-mgr-field-padding);
1163+
/* special padding because selected items need margin-top */
11001164
position: relative;
11011165
white-space: normal; /* make selected options wrap */
1102-
width: auto !important; /* prevents the right border to be cut off */
11031166

11041167
.ext-strict .x-toolbar .x-small-editor & {
11051168
height: auto !important; /* override the extjs default theme style high specifiy + !important rule, wtf... */
@@ -1109,17 +1172,15 @@ input::-moz-focus-inner {
11091172
cursor: text;
11101173
min-height: 20px;
11111174
overflow: visible; /* prevent item box-shadow from being cut off */
1112-
padding-right: 61px; /* 2 * 30px for each .x-form-trigger + 1px border */
11131175
white-space: normal; /* make selected options wrap */
1114-
width: auto !important; /* override extjs width calculation */
11151176

11161177
.x-toolbar & {
1117-
margin: -5px 0 0 -5px; /* fix for superbox selects in toolbars */
1178+
/* fix for superbox selects in toolbars */
1179+
margin: -var(--modx-mgr-field-padding) 0 0 -var(--modx-mgr-field-padding);
11181180
}
11191181

11201182
li {
1121-
margin: 5px 5px 0 0;
1122-
padding: 0;
1183+
margin: calc(var(--modx-mgr-field-padding) * 0.5) var(--modx-mgr-field-padding) calc(var(--modx-mgr-field-padding) * 0.5) 0;
11231184

11241185
&.x-superboxselect-item {
11251186
cursor: default; /* don't make the selected options appear like full buttons */
@@ -1141,7 +1202,6 @@ input::-moz-focus-inner {
11411202
display: inline-block; /*font-size: 1px;*/
11421203
outline: 0; /* fix firefox dotted outlines */
11431204
opacity: 0.6;
1144-
filter: alpha(opacity=60); /* for IE <= 8 */
11451205
padding: 0;
11461206
position: absolute;
11471207
top: 0;
@@ -1199,12 +1259,12 @@ input::-moz-focus-inner {
11991259
position: absolute;
12001260
top: 0;
12011261
right: 0;
1202-
width: 61px;
1203-
height: 100%; /* 61px account for the border of the clear button */
1262+
width: calc((var(--modx-mgr-field-trigger-width) * 2) + var(--modx-mgr-field-border-width));
1263+
height: 100%;
12041264

12051265
.x-superboxselect-btn-expand {
12061266
border-radius: 0;
1207-
right: 31px; /* account for the border of the clear button */
1267+
right: calc(var(--modx-mgr-field-trigger-width) + var(--modx-mgr-field-border-width));
12081268
}
12091269

12101270
.x-superboxselect-btn-clear {
@@ -1876,4 +1936,4 @@ td.x-date-mp-sep {
18761936
color: #fff;
18771937
background-color: rgba(0, 0, 0, 0.8);
18781938
}
1879-
}
1939+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,19 @@ $fa-css-prefix: fa;
3333
:root {
3434
// dimensioning
3535
--modx-mgr-vertical-tabs-categories-width: 10rem;
36+
--modx-mgr-field-height-min: 2rem;
37+
--modx-mgr-field-trigger-width: 30px;
38+
--modx-mgr-field-tv-component-width-max: 400px;
39+
--modx-mgr-field-tv-url-protocol-width: 100px;
3640

3741
// spacing
3842
--modx-mgr-global-spacing: 1rem;
3943
--modx-mgr-panel-spacing: var(--modx-mgr-global-spacing);
44+
--modx-mgr-field-padding: calc(var(--modx-mgr-global-spacing) * 0.45);
4045

4146
// borders
4247
--modx-mgr-border-size-global: 0.0625rem;
48+
--modx-mgr-field-border-width: var(--modx-mgr-border-size-global);
4349
--modx-mgr-border-size-grid: var(--modx-mgr-border-size-global);
4450
--modx-mgr-border-size-region-divider: var(--modx-mgr-border-size-global);
4551

‎manager/templates/default/css/index-min.css‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎manager/templates/default/css/index.css‎

Lines changed: 62 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -18260,9 +18260,15 @@ readers do not read off random characters that represent icons */
1826018260

1826118261
:root {
1826218262
--modx-mgr-vertical-tabs-categories-width: 10rem;
18263+
--modx-mgr-field-height-min: 2rem;
18264+
--modx-mgr-field-trigger-width: 30px;
18265+
--modx-mgr-field-tv-component-width-max: 400px;
18266+
--modx-mgr-field-tv-url-protocol-width: 100px;
1826318267
--modx-mgr-global-spacing: 1rem;
1826418268
--modx-mgr-panel-spacing: var(--modx-mgr-global-spacing);
18269+
--modx-mgr-field-padding: calc(var(--modx-mgr-global-spacing) * 0.45);
1826518270
--modx-mgr-border-size-global: 0.0625rem;
18271+
--modx-mgr-field-border-width: var(--modx-mgr-border-size-global);
1826618272
--modx-mgr-border-size-grid: var(--modx-mgr-border-size-global);
1826718273
--modx-mgr-border-size-region-divider: var(--modx-mgr-border-size-global);
1826818274
--modx-mgr-global-radius: .25rem;
@@ -20942,7 +20948,56 @@ input::-moz-focus-inner {
2094220948
/* for IE <= 8 */
2094320949
}
2094420950
.x-form-item.modx-tv {
20945-
padding: 0 0 0 0 !important;
20951+
padding: 0 !important;
20952+
}
20953+
.x-form-item.modx-tv .x-form-text,
20954+
.x-form-item.modx-tv .x-form-textarea {
20955+
box-sizing: border-box;
20956+
min-height: var(--modx-mgr-field-height-min);
20957+
padding: var(--modx-mgr-field-padding);
20958+
width: 100% !important;
20959+
}
20960+
.x-form-item.modx-tv .x-form-field-wrap {
20961+
width: 100% !important;
20962+
box-sizing: border-box;
20963+
}
20964+
.x-form-item.modx-tv .x-form-field-wrap .x-form-text {
20965+
max-width: calc(100% - var(--modx-mgr-field-trigger-width));
20966+
}
20967+
.x-form-item.modx-tv.modx-tv-type-resourcelist, .x-form-item.modx-tv.modx-tv-type-listbox-multiple, .x-form-item.modx-tv.modx-tv-type-listbox, .x-form-item.modx-tv.modx-tv-type-image, .x-form-item.modx-tv.modx-tv-type-file, .x-form-item.modx-tv.modx-tv-type-date, .x-form-item.modx-tv.modx-tv-type-number {
20968+
max-width: var(--modx-mgr-field-tv-component-width-max);
20969+
}
20970+
.x-form-item.modx-tv.modx-tv-type-date .x-datetime-wrap > table {
20971+
width: 100%;
20972+
}
20973+
.x-form-item.modx-tv.modx-tv-type-date .x-datetime-wrap > table td {
20974+
width: 50%;
20975+
}
20976+
.x-form-item.modx-tv.modx-tv-type-richtext {
20977+
max-width: unset;
20978+
}
20979+
.x-form-item.modx-tv.modx-tv-type-listbox-multiple .x-form-field-wrap {
20980+
box-sizing: content-box;
20981+
border-color: #fff;
20982+
}
20983+
.x-form-item.modx-tv.modx-tv-type-listbox-multiple .x-form-field-wrap .x-form-text {
20984+
max-width: 100%;
20985+
border: 1px solid #E4E4E4;
20986+
}
20987+
.x-form-item.modx-tv.modx-tv-type-listbox-multiple .x-form-field-wrap .x-form-text.x-form-focus {
20988+
border-color: #999999;
20989+
}
20990+
.x-form-item.modx-tv.modx-tv-type-listbox-multiple .x-form-field-wrap .x-form-text ul {
20991+
width: 100% !important;
20992+
max-width: calc(100% - var(--modx-mgr-field-trigger-width) * 2 + var(--modx-mgr-field-padding));
20993+
}
20994+
.x-form-item.modx-tv.modx-tv-type-url .x-form-field-wrap {
20995+
width: var(--modx-mgr-field-tv-url-protocol-width) !important;
20996+
}
20997+
.x-form-item.modx-tv.modx-tv-type-url .textfield {
20998+
width: calc(100% - var(--modx-mgr-field-tv-url-protocol-width) - 4px) !important;
20999+
min-height: calc(var(--modx-mgr-field-height-min) + 2px);
21000+
padding: var(--modx-mgr-field-padding);
2094621001
}
2094721002
.x-form-item .modx-tv-inherited {
2094821003
color: #515151;
@@ -21341,7 +21396,7 @@ input::-moz-focus-inner {
2134121396
/* override button styles box-shadow */
2134221397
padding: 0;
2134321398
/* override button styles padding */
21344-
width: 30px;
21399+
width: var(--modx-mgr-field-trigger-width);
2134521400
height: 100% !important;
2134621401
/* height 100% to enable vertical centering, !important to override default extjs theme styles */
2134721402
position: absolute;
@@ -21449,17 +21504,6 @@ input::-moz-focus-inner {
2144921504
/* needs to stay above the transparent file input field */
2145021505
}
2145121506

21452-
.modx-tv-type-listbox-multiple .x-form-field-wrap {
21453-
border-color: #fff;
21454-
}
21455-
.modx-tv-type-listbox-multiple .x-form-field-wrap .x-form-text {
21456-
border: 1px solid #E4E4E4;
21457-
margin: -1px;
21458-
}
21459-
.modx-tv-type-listbox-multiple .x-form-field-wrap .x-form-text.x-form-focus {
21460-
border-color: #999999;
21461-
}
21462-
2146321507
#x-form-el-modx-user-photo .x-form-file-trigger:before {
2146421508
content: "\f1c5";
2146521509
}
@@ -22208,13 +22252,11 @@ html[dir=rtl] .display-switch .x-fieldset legend [type=checkbox] {
2220822252
/* override the extjs default theme style of 18px */
2220922253
margin: 0;
2221022254
outline: 0;
22211-
padding: 0 5px 5px 5px;
22255+
padding: 0 var(--modx-mgr-field-padding) var(--modx-mgr-field-padding);
2221222256
/* special padding because selected items need margin-top */
2221322257
position: relative;
2221422258
white-space: normal;
2221522259
/* make selected options wrap */
22216-
width: auto !important;
22217-
/* prevents the right border to be cut off */
2221822260
/* these buttons got the .x-form-trigger class assigned */
2221922261
}
2222022262
.ext-strict .x-toolbar .x-small-editor .x-superboxselect {
@@ -22226,20 +22268,15 @@ html[dir=rtl] .display-switch .x-fieldset legend [type=checkbox] {
2222622268
min-height: 20px;
2222722269
overflow: visible;
2222822270
/* prevent item box-shadow from being cut off */
22229-
padding-right: 61px;
22230-
/* 2 * 30px for each .x-form-trigger + 1px border */
2223122271
white-space: normal;
2223222272
/* make selected options wrap */
22233-
width: auto !important;
22234-
/* override extjs width calculation */
2223522273
}
2223622274
.x-toolbar .x-superboxselect ul {
22237-
margin: -5px 0 0 -5px;
2223822275
/* fix for superbox selects in toolbars */
22276+
margin: -var(--modx-mgr-field-padding) 0 0 -var(--modx-mgr-field-padding);
2223922277
}
2224022278
.x-superboxselect ul li {
22241-
margin: 5px 5px 0 0;
22242-
padding: 0;
22279+
margin: calc(var(--modx-mgr-field-padding) * 0.5) var(--modx-mgr-field-padding) calc(var(--modx-mgr-field-padding) * 0.5) 0;
2224322280
}
2224422281
.x-superboxselect ul li.x-superboxselect-item {
2224522282
cursor: default;
@@ -22264,8 +22301,6 @@ html[dir=rtl] .display-switch .x-fieldset legend [type=checkbox] {
2226422301
outline: 0;
2226522302
/* fix firefox dotted outlines */
2226622303
opacity: 0.6;
22267-
filter: alpha(opacity=60);
22268-
/* for IE <= 8 */
2226922304
padding: 0;
2227022305
position: absolute;
2227122306
top: 0;
@@ -22312,14 +22347,12 @@ html[dir=rtl] .display-switch .x-fieldset legend [type=checkbox] {
2231222347
position: absolute;
2231322348
top: 0;
2231422349
right: 0;
22315-
width: 61px;
22350+
width: calc(var(--modx-mgr-field-trigger-width) * 2 + var(--modx-mgr-field-border-width));
2231622351
height: 100%;
22317-
/* 61px account for the border of the clear button */
2231822352
}
2231922353
.x-superboxselect .x-superboxselect-btns .x-superboxselect-btn-expand {
2232022354
border-radius: 0;
22321-
right: 31px;
22322-
/* account for the border of the clear button */
22355+
right: calc(var(--modx-mgr-field-trigger-width) + var(--modx-mgr-field-border-width));
2232322356
}
2232422357
.x-superboxselect .x-superboxselect-btns .x-superboxselect-btn-clear {
2232522358
border-left: 1px solid #E4E4E4;

‎manager/templates/default/element/tv/renders/input/autotag.tpl‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ Ext.onReady(function() {
1616
xtype: 'textfield'
1717
,itemId: 'tv{$tv->id}'
1818
,applyTo: 'tv{$tv->id}'
19-
,width: '99%'
2019
,id: 'tv{$tv->id}'
2120
,enableKeyEvents: true
2221
,msgTarget: 'under'

‎manager/templates/default/element/tv/renders/input/date.tpl‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,6 @@ Ext.onReady(function() {
2323
{if $params.maxTimeValue|default},maxTimeValue: '{$params.maxTimeValue|default}'{/if}
2424
{if $params.timeIncrement|default},timeIncrement: {$params.timeIncrement|default}{/if}
2525
{if $params.hideTime|default},hideTime: {$params.hideTime|default}{/if}
26-
,dateWidth: 198
27-
,timeWidth: 198
2826
,allowBlank: {if $params.allowBlank == 1 || $params.allowBlank == 'true'}true{else}false{/if}
2927
{if $tv->value != ''}
3028
,value: '{$tv->value}'

‎manager/templates/default/element/tv/renders/input/email.tpl‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ Ext.onReady(function() {
1515
xtype: 'textfield'
1616
,itemId: 'tv{$tv->id}'
1717
,applyTo: 'tv{$tv->id}'
18-
,width: '99%'
1918
,vtype: 'email'
2019
,enableKeyEvents: true
2120
,msgTarget: 'under'

0 commit comments

Comments
 (0)