I'm trying to use the popups module for a a form callback but it doesn't seem to be able to set the height properly. When I look at the js popupHeight (in Popups.resizeAndCenter) is set to 82px, and windowHeight is set to 378. The actual height of the content in the popup is suppose to be 378 but it's being overridden by the 82px popup height.

Is there a way I can manually set the height to what it should be? Or am I just doing something wrong here?

Also, I noticed a javascript error when it loads the page:

$form.ajaxForm is not a function -- popups.js line 936

Thanks for any help!
Scott

Comments

hadsie’s picture

hadsie commented

Just tried the dev version and had the same issue.

HAg’s picture

HAg commented
Version: 6.x-2.0-alpha5 » 6.x-2.0-beta0
Category: support » task
Priority: Normal » Major

Still not solved. Also a feature request: AutoHight off/on and set hight.

HAg’s picture

HAg commented

I have found a simple workaround.

In the CSS, find:
.popups-box.

Add this property:
height: auto !important;

Usually the styles are applied in order as they are read by the browser, but a property that has the !important property will always be applied no matter where that rule appears in the CSS document. In this case the hight will always be set to auto.

HAg’s picture

HAg commented
Category: feature » task

This is where it goes wrong:

.popups-box {
    position: absolute;
    z-index: 9;  
    background: white;
    border: 1px solid black;
    padding: 0.5em;
    width: 600px;
    overflow: auto;
}

The padding is added outside the box, inside the border. The padding is therefore not contributing to the height, nor the width of the box. Consequently the height is calculated to the height without the padding an the popup box becomes to small. The padding should be added to .popups-title an .popups-body instead.

I have found that a box that continuously adjust its height according to the view port, and stays centered is preferable, since very high boxes lower the user experience, and "box fit to content" only makes sense when the box is smaller than the view window. In most cases the users view window will be to small, and the user is forced to scroll the page, in order to see the rest of the box. Scrolling the contents of the box, rather than scrolling the box, is a better solution. This is best achieved with css.

One last thing: The box should be positioned with css, not JavaScript, since css renders much faster.

HAg’s picture

HAg commented
Category: task » feature
Status: Active » Fixed

Category: task » feature
Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.