Размер заголовка диалогового окна jqueryUI - PullRequest
Новая
       13

Размер заголовка диалогового окна jqueryUI

1 голос
/ 17 мая 2010

Я создаю систему бронирования отелей, которая требует много модальных диалогов. Для этой цели я использую диалоговый виджет jqueryUI. вчера я включил его в одну из функций приложения, но на этот раз, когда диалоговое окно открывается при щелчке, его заголовок очень большой, около 300-400 пикселей в высоту, где, как обычно, заголовок составляет около 40 пикселей в высоту. Везде в приложении оно все еще работает нормально, но только в одном месте оно выдает такую ​​ошибку. Css также одинаков во всех местах. Если кто-нибудь знает, как решить эту проблему, пожалуйста, напишите здесь.

Ошибка может быть по этой ссылке изображения

это приведенный ниже код javascript, который запускается при нажатии кнопки. 

$("#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');   
                }   
            }
        });

Его html помещается в начале тега body вместе с другими диалоговыми виджетами и указан ниже. 

<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>

Спасибо Аяз Алави

Ответы [ 3 ]

1 голос
/ 30 июля 2010

решение - добавить дополнительный класс dialogaddSeasons и использовать правила, перечисленные ниже: 

 $("#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;
    }
1 голос
/ 08 сентября 2011

У меня была такая же проблема при использовании темы jquery-ui. Версия темы не совпадает с версией jquery-ui. Как только я синхронизировал их, это решило проблему для меня.

0 голосов
/ 18 мая 2010

Не имея возможности использовать Firebug для щелчка правой кнопкой мыши и проверки элемента на элементе заголовка (подсказка), я бы сказал, что есть некоторые другие CSS-переопределения или добавления к желаемому стилю. Если вы не можете опубликовать ссылку на имеющуюся страницу или полный ее пример (поскольку фрагмент не содержит CSS, который может на нее повлиять), вам нужно попробовать описанное выше для себя и удалить или переопределить соответствующие свойства.

...