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

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

Error can view at this link of an image

его 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 размещен только в начале тега тела с другими виджетами диалога и указан ниже.

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

Благодаря Аяз Алави

источник

2010-05-17 Ayaz Alavi

извините, но вы смотрели на ваш код !? у вас есть ширина: '460, maxWidth: 500, height: 400,' –

- это высота и ширина полного диалогового виджета, а не только заголовок. класс заголовка - это ui-dialog-titlebar, который накладывается примерно на 400 пикселей, что является проблемой, которую я пытаюсь решить. –

решение добавить дополнительные 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; 
    }

источник

2010-07-30 13:52:18

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

источник

2010-05-17 21:38:25 mVChr

Я понял вопрос спасибо. –

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

источник

2011-09-08 01:55:04 Noel

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

ответ

Смежные вопросы