Диалоговое окно Jquery увеличивает размер элементов управления вводом при каждом его открытии - PullRequest
0 голосов
/ 17 января 2011

У меня странная проблема с диалоговым окном jquery, можете ли вы помочь?

В Internet Exporer 8 каждый раз, когда открывается диалоговое окно, элементы управления текстового поля увеличиваются в размере!Ни один из других предметов не делает: метка и кнопка.Есть идеи?Если это имеет какое-то значение - диалоговое окно создается, когда в списке выбора выбран определенный элемент.

Th-диалоговое окно имеет тематическую структуру с тематического ролика, а элементы управления оформлены с использованием внешнего файла 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>

Ответы [ 2 ]

2 голосов
/ 27 августа 2011

Я обнаружил, что это была анимация hide: 'puff'. Изменение анимации на ту, которая не меняет размер элементов, таких как сгиб, исправило это для меня

0 голосов
/ 17 января 2011

Я исправил это сейчас. Может быть, ошибка IE8. В открывшемся диалоговом окне я использовал следующее, чтобы гарантировать, что граница сохраняется одинаковой при каждом открытии диалогового окна. И ширина, и высота устанавливались каждый раз.

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