Info : Jquery-UI 1.8.4 (Tested and same effect on 1.8.6).

I got a page with nothing too fancy, a table to locate areas and some forms. Something like:

A header on top, a menu, and then a toolbar (understand a <td> with buttons inside) and an image on the right:

Header
Menu
Toolbar	Image

This contained exactly is the user screen (no scrollbars).

I needed to use a modal dialog so I used the code to the bottom of this post.

My problem is that when the page is rendered even before I open the dialog, a white space has been added under my (Toolbar/Image) and has the same height as my hidden dialog ....

I really need to rid this space from my page. 

I tried to :

* Use position:absolute;top:0px;left:0px to my div

* Modify .ui-dialog in CSS to position:fixed

* Encapsulate my div in another div with : width:0px;height:0px:overflow:hidden

All this do nothing.

* I also tried to create an iframe and put my div inside, this work for the white space but my dialog won't show outside of the frame :D

I'm a bit stuck, any help appreciated!

2. $("#condamnationRemoveDialog").dialog({
3. autoOpen: false,
4. height: 300,
5. width: 450,
6. modal: true,
7. ...
8. });
10. // Date picker
11. $(function() {
12. $.datepicker.setDefaults($.datepicker.regional['fr']);
13. $( "#condamnDateDepose" ).datepicker();
14. $( "#condamnDateDepose" ).datepicker( "option", "dateFormat", <?php echo "'".$_SESSION["DATEPICKER_DISPLAY_DATE"]."'"?>);
15. });
16. </script>
18. <!--  Depose dialog -->
19. <div id="condamnationRemoveDialog" title="Supprimer une condamnation" style="display: none;">
20. <form>
21. <input type='hidden' value = '' id='idToRemove'/>
22. <table border="0">
23. <tr>
24. <td>
25. <label for="condamnDateDepose">Date de dépose</label>
26. </td>
27. <td>
28. <input type="text" name="condamnDateDepose" id="condamnDateDepose" class="ui-widget-content ui-corner-all" style="width: 150px;" readonly="readonly"/>
29. </td>
30. </tr>
31. </table>
32. </form>
33. </div>