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只是在与其他对话部件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>

感谢阿亚兹阿拉维

来源

2010-05-17 Ayaz Alavi

抱歉，但是，你有没有看你的代码！？你有宽度：'460, maxWidth：500, height：400，' – 2010-05-17 21:44:14

这是一个完整的对话框小部件的高度和宽度不只是头。头文件类是ui-dialog-titlebar，它正在被大约400px的过度扩大，这是我想解决的一个问题。 – 2010-05-18 07:11:17

的解决办法是增加一个额外的类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

我想出了这个问题，谢谢。 – 2010-06-04 13:41:18

我使用一个jQuery UI的主题有同样的问题。主题的版本与jquery-ui的版本不匹配。一旦我同步他们，它解决了我的问题。

来源

2011-09-08 01:55:04 Noel

jqueryUI对话框标题大小

回答

相关问题