While working with Node Reference Views Select (which uses CTools Modals) on longer-than-average forms, I noticed that the CTools #modalBackdrop div was not receiving the correct height in Firefox - to be specific, it was using the viewport height (albeit scaling correctly) instead of the full document height. This results in the backdrop being "cut off" after the viewport's height in pixels.

This seems like a corner case resulting from the custom Zen subtheme I am using, as it works fine in Garland. However, from what I can tell in Firebug the div is not inheriting any properties it shouldn't, and everything is perfectly valid XHTML and CSS. It does, however, use a number of CSS tricks that play off of the height property, which may have thrown off js/mc.js' computation of docHeight.

Attached is a rough solution, based on a more robust way for handling document height that I had bookmarked (code credit is in the comments) - it works without error in the latest versions of Safari, Chrome, and Firefox, as well as IE 6, 7 and 8. I found no trace of a border below the div, so I removed the comment there as well. However, I am leaving this as CNW, since this is only a starting point and I'm sure it can be improved.

CommentFileSizeAuthor
#2 ctools-modal-backdrop-fixed-721926.patch1.71 KBlitwol
ctools-modalbackdrop-0.patch1.63 KBalexiswatson

Comments

alexiswatson’s picture

alexiswatson commented

To clarify, the above was tested using both Garland and the "offending" Zen subtheme, in the same browsers.

litwol’s picture

litwol commented
Title: Modal Background Doesn't Always Expand to Full Document Height » Fix ModalBackdrop introduces scroll bars (patch attached).
Version: 6.x-1.x-dev » 7.x-1.x-dev
Status: Needs work » Needs review
StatusFileSize
new ctools-modal-backdrop-fixed-721926.patch1.71 KB

I'm hijacking this issue considering how old (and likely no longer relevant) original issue was.

the problem: Current modalbackdrop, while expanded to full document width/height, introduces scroll bars. Compensating for scroll bars by setting backdrop to less than full document width/height will cause ugly "bars" to appear (ie where backdrop doesn't fully cover the document).

The solution: see patch attached. it works. tested in diff browsers and mobile devices.

attached patch solution is so good in fact, that the only time scroll bars will appear is when original document content itself causes scroll bars to appear (ie when user resizes their browser window bellow expected minimum, or more relevant example: when user tilts their mobile device forcing orientation to change and thus the browser height/width dimensions to change).

litwol’s picture

litwol commented

To help testers understand this patch better. use the following code snippet to modify modal's size (to consume entire screen space). Before patch you will notice both horizontal and vertical scroll bars appear. after patch you will see no such monstrosity :) . For added effect of awesomeness drag your browser window to resize in any direction and you'll see modal/backdrop maintain full screen stretch without introducing scroll bars. 

  drupal_add_js(array(
    'CToolsModal' => array(    
      'modalSize' => array(    
        'width' => 1,          
        'height' => 1,         
      ),
    ),                         
  ), 'setting');
litwol’s picture

litwol commented
Assigned: Unassigned » litwol
Status: Needs review » Needs work

@todo: remove backdrop dimensions calculating code now that above proposed patch deprecates it.

asimov6’s picture

asimov6 commented

This issue still remains in version 7.x-1.3 (using zen subtheme). I tested the patch in Chrome and Firefox and it solved the issue. Will the patch be included in a release?

tssarun’s picture

tssarun commented
Issue summary: View changes

Hi,
Any update on this. I too facing the same issue. When a popup is open then window vertical scrollbar enabled.

Regards,
tssarun.

FranCarstens’s picture

FranCarstens commented

This problem persists in ctools-7.x-1.x-dev (2014-Nov-19).

The patch by litwol fixes it in comment #2.

The body still scrolls though (very obvious with transparent backgrounds). A solution similar to this: http://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-w... might help?