Skip to content
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.

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

Manager customization — TVs cause right sidebar to explode #13977

Open
SnowCreative opened this issue Jul 5, 2018 · 14 comments
Open

Manager customization — TVs cause right sidebar to explode #13977

SnowCreative opened this issue Jul 5, 2018 · 14 comments
Labels
area-fc Work related to form customization rules bug The issue in the code or project, which should be addressed. type-frontend Issues related to UI/UX issues, mostly about styles and frontend implementations on JavaScript.
Milestone

Comments

@SnowCreative
Copy link
Contributor

SnowCreative commented Jul 5, 2018

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:

TV in right column

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

TV in right column, inside widget

Expected behavior

TV widths should be determined by the column they occupy.

Environment

MODX 3.0.0 alpha

@jonleverrier
Copy link
Contributor

@Rainbowtiger screenshots return a 404

@SnowCreative
Copy link
Contributor Author

You caught me during an edit. They work now.

@muzzwood
Copy link
Contributor

muzzwood commented Jul 6, 2018

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?

screenshot from 2018-07-06 12-59-17

@jonleverrier
Copy link
Contributor

jonleverrier commented Jul 6, 2018

@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
Copy link
Contributor

muzzwood commented Jul 6, 2018

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
Copy link
Contributor

jonleverrier commented Jul 6, 2018

@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

screen shot 2018-07-06 at 16 05 55

@muzzwood
Copy link
Contributor

muzzwood commented Jul 6, 2018

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

@jonleverrier
Copy link
Contributor

@digitalpenguin

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

screen shot 2018-07-06 at 16 16 06

@jonleverrier
Copy link
Contributor

jonleverrier commented Jul 6, 2018

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
Copy link
Contributor

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

@muzzwood
Copy link
Contributor

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.

@alroniks alroniks added the MODX3 label Jul 24, 2018
@SnowCreative SnowCreative changed the title MODX3: Manager customization — TVs cause right sidebar to explode MODX 3: Manager customization — TVs cause right sidebar to explode Jul 25, 2018
@alroniks alroniks added type-frontend Issues related to UI/UX issues, mostly about styles and frontend implementations on JavaScript. bug The issue in the code or project, which should be addressed. labels Aug 2, 2018
@alroniks alroniks added this to the v3.0.0-alpha milestone Aug 17, 2018
@jonleverrier
Copy link
Contributor

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 alroniks changed the title MODX 3: Manager customization — TVs cause right sidebar to explode Manager customization — TVs cause right sidebar to explode Aug 22, 2018
@alroniks alroniks added the area-fc Work related to form customization rules label Aug 22, 2018
@alroniks
Copy link
Collaborator

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

@smg6511
Copy link
Collaborator

smg6511 commented Sep 12, 2021

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.

@opengeek opengeek modified the milestones: v3.0.0-beta1, v3.0.0-beta2 Nov 9, 2021
@opengeek opengeek modified the milestones: v3.0.0-beta2, v3.0.0-rc1 Nov 23, 2021
@opengeek opengeek modified the milestones: v3.0.0-rc1, v3.0.0-rc2 Jan 20, 2022
@opengeek opengeek modified the milestones: v3.0.0-rc2, v3.0.0-pl Feb 3, 2022
@opengeek opengeek modified the milestones: v3.0.0, v3.0.1 Mar 29, 2022
@opengeek opengeek modified the milestones: v3.0.1, v3.0.2 Apr 28, 2022
@opengeek opengeek modified the milestones: v3.0.2, v3.0.3 Nov 16, 2022
@opengeek opengeek modified the milestones: v3.0.3, v3.1.0 Jan 17, 2023
@opengeek opengeek modified the milestones: v3.1.0, v3.1.1 Dec 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-fc Work related to form customization rules bug The issue in the code or project, which should be addressed. type-frontend Issues related to UI/UX issues, mostly about styles and frontend implementations on JavaScript.
Projects
None yet
Development

No branches or pull requests

8 participants