CODEWITHSUNDEEP
asp.netcssinternet-explorerjquery-ui-dialog
Edd
Edd

Reputation: 1

Jquery dialog box increases the size of input controls each time it is opened

I have strange problem with a jquery dialog box, can you help at all?

In internet exporer 8, every time the dialog box is opened the textbox controls increase in size! None of the other items do: label and button. Any ideas? If it makes any difference - dialog is created when a certain item is selected within a select list.

Th dialog is themed from the theme roller site and the controls styled using an external css file.

Best regards Ed

Code:

$('#<%= 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>

Upvotes: 0

Views: 803

Answers (2)

Philip Hope
Philip Hope

Reputation: 21

I found it was the hide: 'puff' animation. Changing the animation to one that does not change the size of the elements such as fold fixed it for me.

Upvotes: 2

Edd
Edd

Reputation: 1

I have fixed this now. Maybe a bug ion IE8. In the dialog open I used the following to ensure the border was kept the same each time the dialog was opened. And the width and the height was set each time. 

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

Upvotes: 0

Related Questions