Creating Custom Page, Can't Scroll It.

Seen in 2.5.8 and 2.6.1, FireFox and Chrome.

I am creating a custom page: https://docs.modx.com/revolution/2.x/developing-in-modx/advanced-development/custom-manager-pages/custom-manager-pages-in-2.3

It's all great, except I can't scroll it.

As the above page says, I have put a class around it:



I can get it to scroll if I do this:



But obviously hard coding the height of 600px is a pretty terrible idea.

I found https://github.com/b03tz/FormSave/issues/27 which is where I got the idea from - P.R. 28. If you look at P.R. 29 there's a line of Javacript that sets the height to page height minus top bar:



Is that really the best way? Some JS to set the height manually?

I'm guessing it's not - other pages like managing users scroll fine.

Thanks,
[ed. note: jarofgreen last edited this post 8 years, 7 months ago.]

Look at the source code of the page and make sure it has html, head, and body tags.

Try adding this to the CSS for the div or body:

Quote from: BobRay at Feb 08, 2018, 01:19 PM

Look at the source code of the page and make sure it has html, head, and body tags.

Totally does. The ModX Header bar and side Resources/Elements/File bar are displaying fine. (To be clear, I'm trying to get my page content to appear inside ModX admin as the guide outlines, not totally replace the Admin UI.)

Quote from: BobRay at Feb 08, 2018, 01:19 PM

Try adding this to the CSS for the div or body:

overflow: scroll;

Well I can't add that to the body, as that is output by ModX. And I already tried adding that to the div the guide says to put in - doesn't work.

More on this:

If you inspect the resulting page and look at the <div id="modx-content"> that ModX uses to hold your custom manager page content, you can see it has a Left, Top, and Width set directly - but not Height. I assume this is the EXT javascript doing this?

If you compare this to the side Resources/Elements/File bar. Look at the side Resources/Elements/File bar - see <div id="modx-leftbar">. This also has a Left, Top, and Width set directly - but not Height. But crucially, look at it's child div - the 2nd nested one. It has style="overflow: auto; width: 289px; height: 1027px;" set. And Scrolling works fine in the side bar!

For my custom content, it appears in <div id="modx-content"> but there is no inner Div that sets the height and scroll explicitly.

Lets triple check - lets look at a page where content does appear in the main page and it scrolls - like the list of users. Scroll is great! And it has <div id="modx-content"> with a Left, Top, and Width set directly - but not Height. But it has a inner div with style="overflow: auto; width: 1097px; height: 1027px;".

So I'm going to go ahead and say either:

1) This is a bug in ModX for Custom Manager Pages in 2.5.8 and 2.6.1. It is not telling EXT to set up the styles on the div correctly so there is a fixed height, which is needed for scroll to work.
2) https://docs.modx.com/revolution/2.x/developing-in-modx/advanced-development/custom-manager-pages/custom-manager-pages-in-2.3 is wrong and is missing a crucial step that is needed.

ps. Passed on to https://github.com/modxcms/revolution/issues/13759 to [ed. note: jarofgreen last edited this post 8 years, 7 months ago.]

Definitely sounds like a bug. Good detective work and thanks for reporting it.