Question

I am having a problem whereby the scrollbars on my jquery dialog are not showing up even though the content is very much larger than the dialog window.

Does anyone know what is wrong?

Here is the dialog initialisation code:

$("#divFoo").dialog({
autoOpen: false,
modal: true,
height: 500,
width: 500,
closeText: '',
position: 'center',
draggable: true,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});

Here is how i am opening it:

$("#divFoo").dialog("open");

Here is the CSS from the stylesheet:

#divFoo
{
    display:none;
}

Here is the HTML div:

<div id="divFoo">
    <table id="tableFoo" cellpadding="5" cellspacing="5">
        <tr>                
            <td id="tdPP01"><img id="imgPP01" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP02"><img id="imgPP02" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP03"><img id="imgPP03" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP04"><img id="imgPP04" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP05"><img id="imgPP05" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP06"><img id="imgPP06" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP07"><img id="imgPP07" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP08"><img id="imgPP08" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP09"><img id="imgPP09" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP10"><img id="imgPP10" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP11"><img id="imgPP11" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP12"><img id="imgPP12" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP13"><img id="imgPP13" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP14"><img id="imgPP14" src="/images/foo.jpg" alt="" /></td>
        </tr>
        <tr>
            <td id="tdPP15"><img id="imgPP15" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP16"><img id="imgPP16" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP17"><img id="imgPP17" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP18"><img id="imgPP18" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP19"><img id="imgPP19" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP20"><img id="imgPP20" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP21"><img id="imgPP21" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP22"><img id="imgPP22" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP23"><img id="imgPP23" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP24"><img id="imgPP24" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP25"><img id="imgPP25" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP26"><img id="imgPP26" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP27"><img id="imgPP27" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP28"><img id="imgPP28" src="/images/foo.jpg" alt="" /></td>
        </tr>
        <tr>
            <td id="tdPP29"><img id="imgPP29" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP30"><img id="imgPP30" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP31"><img id="imgPP31" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP32"><img id="imgPP32" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP33"><img id="imgPP33" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP34"><img id="imgPP34" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP35"><img id="imgPP35" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP36"><img id="imgPP36" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP37"><img id="imgPP37" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP38"><img id="imgPP38" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP39"><img id="imgPP39" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP40"><img id="imgPP40" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP41"><img id="imgPP41" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP42"><img id="imgPP42" src="/images/foo.jpg" alt="" /></td>
        </tr>
        <tr>
            <td id="tdPP43"><img id="imgPP43" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP44"><img id="imgPP44" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP45"><img id="imgPP45" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP46"><img id="imgPP46" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP47"><img id="imgPP47" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP48"><img id="imgPP48" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP49"><img id="imgPP49" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP50"><img id="imgPP50" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP51"><img id="imgPP51" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP52"><img id="imgPP52" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP53"><img id="imgPP53" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP54"><img id="imgPP54" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP55"><img id="imgPP55" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP56"><img id="imgPP56" src="/images/foo.jpg" alt="" /></td>
        </tr>
        <tr>
            <td id="tdPP57"><img id="imgPP57" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP58"><img id="imgPP58" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP59"><img id="imgPP59" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP60"><img id="imgPP60" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP61"><img id="imgPP61" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP62"><img id="imgPP62" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP63"><img id="imgPP63" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP64"><img id="imgPP64" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP65"><img id="imgPP65" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP66"><img id="imgPP66" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP67"><img id="imgPP67" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP68"><img id="imgPP68" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP69"><img id="imgPP69" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP70"><img id="imgPP70" src="/images/foo.jpg" alt="" /></td>
        </tr>
        <tr>
            <td id="tdPP71"><img id="imgPP71" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP72"><img id="imgPP72" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP73"><img id="imgPP73" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP74"><img id="imgPP74" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP75"><img id="imgPP75" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP76"><img id="imgPP76" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP77"><img id="imgPP77" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP78"><img id="imgPP78" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP79"><img id="imgPP79" src="/images/foo.jpg" alt="" /></td>
        </tr>
    </table>   
</div>

Answer 1

Try setting the style of #divFoo to have overflow:false and also add resizable: 'false' to dialog initialization.