jquery - jqueryUI dialog box header size -

I am making hotel booking systems for which many modal communication is necessary. For this purpose I use jqueryUI dialogue widget I am doing. Yesterday I had embedded it on one of the features of the application, but this time when the dialogue opens on click, its headline is very much about the height of 300-400 px where the normal header is between 40px height everywhere in the application It is still working fine, but it is giving such error to only one place. CSS is similar in all places. If anyone knows how to fix this issue, please post here.

This JavaScript code is listed below, which has been removed when the button is pressed.

$ (resizeable: false, modal: true, width: 460, maxWidth: 500, height: 400, draggable: false, title: "add new season", button: {'Add Season': Submit () ($ ("$ dialogaddSeasons #addSeasonForm"). Submit ();}, Cancel: Task () {$ (this) .dialog ('close');}}}); < / Pre>

The HTML is placed at the beginning of the body tag with the other dialog widget and is listed below.

  
 & lt ; Div id = "container management rooms"> gt; & gt; form action = "../ booking_system / seasons.fpp" antipay = "multipart / faw Um-data "method =" post "id =" addonform "> lt; table & gt; & lt; tr & gt; & lt; td & gt; & lt; label & gt; Season name: & Lt; / labels & gt; & lt; / td & gt; & lt; td & gt; & lt; input type = "text" name = "season_name" id = "season_name" category = "essential elementaddit ui- widget- Content ui-corner-all text "/>  & lt; / & gt; Tr & gt; & lt; td & gt; & lt; label & gt; Initial Date: & lt; / Labels & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = "text" name = "start_date" id = "start_date" class = "date required elementsAdit ui-widget-content ui-corner-all text" /> & Lt; / Td> & Lt; / TR & gt; & Lt; Tr & gt; & Lt; Td> & Lt; Label & gt; End date: & lt; / Labels & gt; & Lt; / Td> & Lt; TD & gt; & Lt; Input type = "text" name = "end_date" id = "end_date" class = "date required elementsaddit ui-widget-content ui-corner-all text" /> & Lt; / Td> & Lt; / Tr & gt; & Lt; / Table & gt; & Lt; / Form & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

thanks Ayaaz Alvi

solution adding an additional dialog dialog Use the Seasons and the rules listed below:

  $ ("# dialogaddSeasons"). Dialog ({resizable: incorrect, model: true, width: 460, maxwidth: 500, dialog class: "dialogaddSeasons", dragable: false, title: "add new season", button: {'add session': function ) {$ ("# DialogaddSeasons #addSeasonForm") Submit ();}, Cancel: Task () {$ (this) Dialog ('Closed');}}}); .dialogaddSeasons table {display: inline; } .dialogaddSesions form {float: left; } .dialogaddSeasons {Display: Block; Swim left; Height: 150px; Outline color: -moz Usage-text color; Outline style: none; Outline-width: 0; Correct: 305px; Top: -4.2px; Width: 460px; Z-index: 1002; }