Revolution: 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.