Jquery 对话框每次打开时都会增加输入控件的大小答案

【问题标题】：Jquery dialog box increases the size of input controls each time it is openedJquery 对话框每次打开时都会增加输入控件的大小
【发布时间】：2011-06-10 09:30:45
【问题描述】：

我的 jquery 对话框有一个奇怪的问题，你能帮忙吗？

在 internet exporer 8 中，每次打开对话框时，文本框控件的大小都会增加！其他项目都没有：标签和按钮。有任何想法吗？如果有任何区别 - 在选择列表中选择某个项目时会创建对话框。

对话框以主题滚轮网站为主题，控件样式使用外部 css 文件。

最好的问候埃德

代码：

$('#<%= uxSearchUnitDialog.ClientID %>').dialog({
 autoOpen: false,
 width: 600,
 title: "Search",
 hide: "puff",
 modal: true,
 open: function (type, data) {
  $(this).parent().appendTo("form");
 },
 buttons: {
  "Cancel": function () {

   //reset search from
   $("#<%= uxUnitSearchResults.ClientID %>").empty();
   $("#<%= uxUnitCodeTxt.ClientID %>").val('');
   $("#<%= uxUnitDescTxt.ClientID %>").val('');
   $("#<%= uxPartnerUnits.ClientID %>").val('');

   $(this).dialog("close");
   $(this).dialog("destroy");
   $('#<%= uxSearchUnitDialog.ClientID %>').css('display', 'none');

  },
  "Ok": function () {

   //reset search from
   $("#<%= uxUnitSearchResults.ClientID %>").empty();
   $("#<%= uxUnitCodeTxt.ClientID %>").val('');
   $("#<%= uxUnitDescTxt.ClientID %>").val('');

   //apply search result to combo box
   $("#<%= uxPartnerUnits.ClientID %>").empty();
   $("#<%= uxPartnerUnits.ClientID %>").html('<option value="" selected="selected"></option><option value="<%=this.SearchEntryText%>"><%=this.SearchEntryText%></option>');
   $("#UnitSearchResultsSelectTemplate").tmpl(data).appendTo("#<%= uxPartnerUnits.ClientID %>");


   $(this).dialog("close");
   $(this).dialog("destroy");

   $('#<%= uxSearchUnitDialog.ClientID %>').css('display', 'none');
  }
 }
});

<div id="uxSearchUnitDialog" runat="server" style="display: none;">

<div class="lloc clearAll">
    <asp:Label ID="uxUnitCodeLbl" runat="server" AssociatedControlID="uxUnitCodeTxt" meta:resourcekey="uxUnitCodeLbl" CssClass="smaller" />
    <input type="text" ID="uxUnitCodeTxt" runat="server" class="medium" />
</div>

<div class="lloc clearAll">
    <asp:Label ID="uxUnitDescLbl" runat="server" AssociatedControlID="uxUnitDescTxt" meta:resourcekey="uxUnitDescLbl" CssClass="smaller" />
    <input type="text" ID="uxUnitDescTxt" runat="server" class="mediumLarge" />
</div>

<input type="button" id="uxSearchForUnitsBtn" runat="server" meta:resourcekey="uxSearchForUnitsBtn"  />

<script id="UnitSearchResultsTableTemplate" type="text/html">
    <tr><td>${Code}</td><td>${Description}</td></tr>
</script>

<script id="UnitSearchResultsSelectTemplate" type="text/html">
    <option value="${Code}">${Description}</option>
</script>

<div class="clearAll" style="height: 300px; overflow: auto">
     <table id="uxUnitSearchResults" runat="server"></table>    
</div>

【问题讨论】：

我现在已经解决了这个问题。控件没有被调整大小它是边界？？？也许是一个错误离子IE8。在打开的对话框中，我使用以下内容确保边框保持不变 $("#").css("border-style", "solid"); $("#").css("border-width", "1px");

标签： asp.net css internet-explorer jquery-ui-dialog

【解决方案1】：

我发现它是 hide: 'puff' 动画。将动画更改为不改变元素大小的动画，例如折叠为我修复了它。

【讨论】：

【解决方案2】：

我现在已经解决了这个问题。也许是一个错误离子IE8。在打开的对话框中，我使用以下内容确保每次打开对话框时边框都保持不变。并且每次设置宽度和高度。

$("#<%= uxUnitCodeTxt.ClientID %>").css("border-style", "solid");
$("#<%= uxUnitCodeTxt.ClientID %>").css("border-width", "1px");
$("#<%= uxUnitCodeTxt.ClientID %>").height(20);
$("#<%= uxUnitCodeTxt.ClientID %>").width(150);

【讨论】：