Fancybox is getting the content size wrong when using jQuery-Chosen?

Question

I have a Fancybox popup that uses AJAX to fetch content.

The fetched html is a div, containing a title, a table with input fields, and some buttons.

Problem is, I'm getting extra padding, or too small size; anyways I have unnecessary scrollbars. I can disable them completely using CSS's overflow , or Fancybox's scrolling property, but I don't want them disabled completely - only added when necessary.

I'm using the jQuery Chosen Plugin, which is what's causing the overflow; how can I avoid this?

The div content is modified by the client, as they can add/remove rows dynamically - so I need the scrollbars to appear in case the user adds too many rows to fit on screen. Here's what happens so far:

What's wrong with this? Here's my CSS for the thing:

#filter-form {
    width: 550px;
}
#filter-form h2 {
    text-align: center;
}
#filter-form .chzn-results {
    max-height: 110px;
}
#filter-form .buttons {
    margin-top: 10px;
    overflow: hidden;
}
#filter-form .buttons .btn_save_filter {
    float: right;
}
#assoc-num, #assoc-string {
    display: none;
}

#filter-form #CustomUserFilters_title {
    width: 350px;
    display: block;
    margin: 0 auto 30px;
}
#add-new-row td {
    text-align: right;
}
#add-new-row button {
    display: inline;
}
#filter-rules, #filter-form .buttons {
    width: 500px;
    margin: 0 auto;
}
#filter-rules td {
    width: 25% !important;
}

The width settings don't matter - removing them or increasing them both still cause them - so it's not Fancybox's autosize feature that's thinking the content is smaller -- it always resizes just the amount it needs, minus some pixels which cause the overflow.

Here's the HTML (big mess, I know):

<div id="filter-div">
<form action="/customUserFilters/create" id="filter-form">
<h2>Create Filter</h2>
<input placeholder="Filter name" type="text" value="" name="CustomUserFilters[title]" id="CustomUserFilters_title"><table id="filter-rules">
    <tbody><tr class="filter-row">
<td class="td-bool-op"></td>
<td class="td-field-id"><select id="" style="width: 150px;" name="CustomUserFilterSettings[][field_id]">
<option value="2">Name</option>
</select></td>
<td class="td-assoc"><select style="width: 100px;" name="CustomUserFilterSettings[][assoc]">
<option value="=">=</option>
</select></td>
<td class="td-value"><input type="text" value="" name="CustomUserFilterSettings[][value]" id="CustomUserFilterSettings_value"></td></tr>    <tr id="new-filter">

<td class="td-bool-op"><select id="" style="width: 60px;" name="CustomUserFilterSettings[][bool_op]">
<option value="AND" selected="selected">AND</option>
<option value="OR">OR</option>
</select></td>
<td class="td-field-id"><select id="" style="width: 150px;" name="CustomUserFilterSettings[][field_id]">
<option value="2">Name</option>
</select></td>
<td class="td-assoc"><select style="width: 100px;" name="CustomUserFilterSettings[][assoc]">
<option value="=">=</option>
</select></td>
<td class="td-value"><input type="text" value="" name="CustomUserFilterSettings[][value]" id="CustomUserFilterSettings_value"></td>    </tr>
    <tr id="add-new-row">
        <td colspan="4">
            <button id="add-new-row-button" class="btn_grey" name="yt0" type="button">+ Add Another Condition</button>        </td>
    </tr>
</tbody></table>
<div class="buttons">
    <button class="btn_orange btn_save_filter" name="yt1" type="button">Create Filter</button>    <button class="btn_grey btn_cancel_filter" name="yt2" type="button">← Cancel</button></div>
</form>

And here's the Fancybox init:

$('#new_filter_button').fancybox({
    beforeLoad: function() {
        $('.qtip').hide();
    },
    type: 'ajax',
    href: window.baseUrl + '/customUserFilters/create',
    openEffect: 'fade',
    closeEffect: 'fade',
    wrapCSS: 'filters-box'
});

Answer 1

Well, as it turns out, Fancybox hides overflowing content.

Since I was using the jQuery Chosen Plugin , even when the boxes were closed, their containers were still in the page only hidden - this caused the div to be higher than it should, but for some reason Fancybox didn't just cause the dialog to be bigger, because the dropdown was hidden, it for some reason excluded it out of the height although it was still taking up vertical space. Then the horizontal scrollbar took width from the dialog and caused the width to overflow, which is what caused the vertical scrollbar.

Damn! Hopefully this answer will help other people running into this problem