There is no max-height set on the UI dialog content div (having class .ui-dialog-content), so a long list of properties (or even just a property close to the bottom of the list) will overflow past the bottom of my screen. No scroll bar is shown.

CommentFileSizeAuthor
#4 fast_token_browser-height-issues-3034835-4.patch2.65 KBsolideogloria

Comments

solideogloria created an issue. See original summary.

solideogloria’s picture

solideogloria commented
Issue summary: View changes
solideogloria’s picture

solideogloria commented

This issue only happens if the popup dialog has not been resized with the mouse yet, because the height attribute will still be set to auto in that case.

solideogloria’s picture

solideogloria commented
StatusFileSize
new fast_token_browser-height-issues-3034835-4.patch2.65 KB

I changed the JS to set the height of the container after expanding a row to what it was before expansion.

solideogloria’s picture

solideogloria commented
Status: Active » Needs review
npacker’s picture

npacker commented
Status: Needs review » Postponed (maintainer needs more info)

I don't see any element labelled with that id.

solideogloria’s picture

solideogloria commented
Status: Postponed (maintainer needs more info) » Needs review

It's a dynamic ID. See the attached patch for the fix, since I changed how the solution works anyway.

solideogloria’s picture

solideogloria commented

It's the popup when you click to show the list of all available tokens

solideogloria’s picture

solideogloria commented
Issue summary: View changes
npacker’s picture

npacker commented

Strange. On my test site the list gets large very quickly and a scrollbar is added to the overall page as needed. Can you give any more details of your setup?

solideogloria’s picture

solideogloria commented

Could it maybe be because my initial list does not require a scrollbar? There aren't enough rows to reach the bottom until I expand a row.

solideogloria’s picture

solideogloria commented

Oh, I see what you mean. Dialogs should not affect the scrolling of my site. My site has overflow: hidden;, so nothing from the dialog will add to the height. I think the dialog itself needs to have its own scrollbar (especially since this is its behavior if you have already resized the dialog at all prior to expanding rows).

npacker’s picture

npacker commented

That sounds like an issue specific to your theme that would be better addressed there.

solideogloria’s picture

solideogloria commented

Your dialog adds a scrollbar if it has been resized, but doesn't if not. That sounds like a problem with the dialog. Causing content to go off the screen and requiring users to handle it themselves doesn't sound like proper behavior, especially since popup dialogs should always fit on the screen.

I even included a patch that fixes the issue.

solideogloria’s picture

solideogloria commented

Feel free to find a way that doesn't require setting the height every time a row is expanded, perhaps by making the dialog resize itself once after it is created, or setting an initial height or something, but the dialog definitely shouldn't be growing every expansion of a row.

npacker’s picture

npacker commented

The behavior of the dialog is controlled by the jQuery UI Dialog widget, and is correct. The scrollbar is only added if you constrain the size of the dialog by resizing. Setting overflow: hidden on your site is a non-standard practice and a specific use case. As such, I do not want to add addtional code to support it. I'm also reluctant to add additional code that controls the behavior of the dialog seperate from the baked-in jQuery UI behavior.

solideogloria’s picture

solideogloria commented

Mmk. There is probably a nice CSS solution if you wanted to set a max-height or something. Otherwise, I'll just do that in my theme. I don't think it makes sense to have a dialog grow past the screen or change the height of my site by overflowing past the bottom of a page.

npacker’s picture

npacker commented
Status: Needs review » Closed (works as designed)

I'd rather let jQuery UI handle the dialog as much as possible. It sounds like you have a unique situation where your site is height-constrained. I don't see this as an issue that the vast majority of users would encounter.