jqueryUI dialog box header size

Question

Hi, I am creating hotel booking system which requires lots of modal dialogs. For this purpose I am using jqueryUI dialog widget. yesterday I embedded it on one of the features of application but this time when dialog opens upon click then its Header is very large about 300-400px in height where as normal header is about 40px in height. Everywhere in the application it is still working fine but at only place it is giving such error. Css is also identical at all places. If anybody knows how to fix this issue then please post here.

Error can view at this link of an image

it javascript code is listed below which is fired when a button is clicked.

$("#dialogaddSeasons").dialog({
            resizable: false,  
            modal:true,
            width: 460, 
            maxWidth:500,
            height:400,
            draggable: false ,
            title:"Add New Season",
            buttons: { 
                'Add Season': function() {              
                    $("#dialogaddSeasons #addSeasonForm").submit();
                },
                Cancel: function() {
                    $(this).dialog('close');   
                }   
            }
        });

Its html is placed just at start of body tag with other dialog widgets and is listed below.

<div id="dialogaddSeasons" >
    <div id="containerManangeRooms"> 
        <form action="../booking_system/season.php" enctype="multipart/form-data" method="post" id="addSeasonForm" >
            <table>
            <tr><td><label>Season Name: </label></td> <td><input type="text"  name="season_name" id="season_name" class="required elementsAddEdit  ui-widget-content ui-corner-all text" /></td></tr>
            <tr><td><label>Starting Date: </label></td> <td><input type="text"  name="start_date" id="start_date"  class="date required elementsAddEdit  ui-widget-content ui-corner-all text" /></td></tr>
            <tr><td><label>Ending Date: </label></td> <td> <input type="text" name="end_date" id="end_date"  class="date required elementsAddEdit  ui-widget-content ui-corner-all text"  /></td></tr>
            </table>    
        </form>
    </div>
</div>

Thanks Ayaz Alavi

Answer 1

Without being able to use Firebug to right-click and Inspect Element on the header element (hint), I would say that there's some other CSS overriding or adding to your desired styling. Unless you can post a link to the page at hand or a full example of it (since the fragment doesn't contain any CSS that might be affecting it), you need to try the above for yourself and remove or override the appropriate properties.

Answer 2

What was yoru solution? I'm seeing the same behavior, and there is no CSS overriding.

Answer 3

solution is add an extra class dialogaddSeasons and use rules listed below:

 $("#dialogaddSeasons").dialog({
                resizable: false,  
            modal: true, 
            width: 460,
            maxWidth:500,
            dialogClass:"dialogaddSeasons",
            draggable: false ,
                title:"Add New Season",
                buttons: { 
                    'Add Season': function() {              
                        $("#dialogaddSeasons #addSeasonForm").submit();
                    },
                    Cancel: function() {
                        $(this).dialog('close');   
                    }   
                }
            });


    .dialogaddSeasons table
    {
        display:inline;
    }
    .dialogaddSeasons form
    {
        float:left;
    }
    .dialogaddSeasons
    {
    display:block;
    float:left;
    height:150px;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:0;
    right:305px;
    top:-4.2px;
    width:460px;
    z-index:1002;
    }