Manager customization — TVs cause right sidebar to explode

[SnowCreative]

Summary

Placing TVs in the right sidebar of the Document tab don't conform to the width of this column

Step to reproduce

Create TV of type "Listbox".

Observed behavior

If placed in the "modx-resource-main-right" Region, TV sits below the three widgets, but not at the right width:

If placed in the "modx-resource-main-right-bottom" Region, TV sits inside the third widget, but still doesn't conform to the width:

Expected behavior

TV widths should be determined by the column they occupy.

Environment

MODX 3.0.0 alpha

[jonleverrier]

@rainbowtiger screenshots return a 404

[SnowCreative]

You caught me during an edit. They work now.

[muzzwood]

This should be able to be fixed with #modx-resource-main-right .x-form-field-wrap.x-form-field-trigger-wrap {max-width:100%;} however this means the inner drop-down fields may be out of alignment. I'll edit this with an update if I figure it out.

Update The above CSS works however on the initial click the dropdown is offset by the same amount the field has been narrowed. On the second click it works correctly. I'm guessing this will need an ExtJS doLayout() or similar on the panel after the field is rendered but I'm not exactly sure where the code for that is. Any ideas?

[jonleverrier]

@digitalpenguin @rainbowtiger Side thought - I wonder if TV's in the modx-resource-main-right region, should have a white background like the "menu" panel above?

They looked naked dropped in on a grey background.

[muzzwood]

True.. Though it would need some logic to add a wrapper panel if there are elements there and hide it if not.
It'd be great for fields to be inserted into the three panels above via manager/form customization too.

[jonleverrier]

@digitalpenguin - that's possible already via FC. the new regions are called modx-resource-main-right-top, modx-resource-main-right-middle and modx-resource-main-right-bottom

[muzzwood]

Hmmm I only tried with a listbox type which didn't appear for me. Could you try one of those too?

[jonleverrier]

@digitalpenguin

It works, but the width escapes outside of the browser window making it impossible to use reliably.

[jonleverrier]

I've tested the following TV's in modx-resource-main-right-bottom and they have the same problem as the OP reported:

• Autotag
• Date
• Email
• File
• Image
• Listbox (Multi-Select)
• Listbox (Single-Select)
• Number
• Resource List
• Text (doesn't escape out of the box, but very close)
• Textarea (doesn't escape out of the box, but very close)
• URL

[jonleverrier]

@digitalpenguin did you try and fix this "in browser" or did you build the MODX 3 css locally?

[muzzwood]

Hi @jonleverrier , I didn't build it I just added the rules into the built css file to test it. It's worth noting that the CSS rule I wrote above is specific to the List Box and other types would need their own. I attempted to fix the drop-down alignment in ExtJS but I couldn't work it out unfortunately. Still, if we can have the fields constrained by their container that's at least better than it is now.

[jonleverrier]

I wonder if issue #11856 is related.

Are we seeing fields overlap their container because the width of the fields are set to 400px?

[alroniks]

@jonleverrier Yes, it's related. I've tried to fix, but the first attempt was unsuccessful.

[smg6511]

I know this is pretty old but wanted to chime in with the reason this and other field control issues are so difficult to remedy. In many places, MODX's forms are built in a bit of a non-ideal way—taking field components out of the Ext ecosystem and rendering them to the DOM. This is one of those areas. Had resource TV fields been added to the panel(s) by creating their respective Ext components instead of rendering and/or replacing blocks of html, the movement and display of these fields would be much more reliably dealt with.

I've begun to tackle this issue in the realm of TV creation via PR #15773 and will look to do the same with how the created TVs are rendered into the resource form, but that will take a little time, especially when it comes to reviewing what will be major changes. The gist of what needs to happen is to:

1. Refactor the js code to insert each TV into the TVs panel by adding their component objects instead of rendered html. Then, if moving TVs via Form Customization... a. Their components need to be captured in variables then destroyed in the TVs panel. b. The cloned TV objects then need to be added to their target panels (regions).
2. Remove pixel widths of field components in favor of using the anchor property to control widths relative to the fields' containers.

In addition to fixing the issue identified here, other issues such as #15806 would be easily solved.