I am using a JQuery Accordion:
<script language="javascript" type="text/javascript">
$(function () {
var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());
$("#accordion").accordion({
autoHeight: true,
// event: "mousedown",
active: activeIndex,
change: function (event, ui) {
// var index = $(this).accordion("option", "active");
// $("#<% =hidAccordionIndex.ClientID %>").val(index);
}
});
});
</script>
And the HTML:
<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />
<div id="kez_header">
<table class="style1">
<tr>
<td>
<h4>
Company Settings
</h4>
</td>
<td align="right" valign="middle">
</td>
</tr>
</table>
</div>
<div id="accordion">
<h3>Paymo Credentials</h3>
<div>
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="<%=txtApi.ClientID%>">
API Key</label>
<div class="controls">
<asp:TextBox ID="txtApi" placeholder="API Key" runat="server" TextMode="SingleLine" Width="304px"></asp:TextBox>
</div>
</div>
<div class="control-group">
<label class="control-label" for="<%=txtEmail.ClientID%>">
Email</label>
<div class="controls">
<asp:TextBox ID="txtEmail" placeholder="Email" runat="server" TextMode="Email" Width="281px"></asp:TextBox>
</div>
</div>
<div class="control-group">
<label class="control-label" for="<%=txtPassword.ClientID%>">
Password</label>
<div class="controls">
<asp:TextBox ID="txtPassword" placeholder="Password" runat="server" TextMode="Password" Width="186px"></asp:TextBox>
</div>
</div>
<asp:Button CssClass="btn" ID="btnEditPaymo" runat="server" OnClick="btnEditPaymo_Click" Text="Save Changes" />
</div>
</div>
<h3>Paymo Settings</h3>
<div>
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="<%=txtFilter.ClientID%>">
Filters</label>
<div class="controls">
<asp:TextBox ID="txtFilter" placeholder="Filters (Separate by ';')" runat="server" TextMode="SingleLine" Width="200px"></asp:TextBox>
</div>
</div>
<asp:Button CssClass="btn" ID="btnEditPaymoSettings" runat="server" Text="Save Changes" OnClick="btnEditPaymoSettings_Click" />
</div>
</div>
<h3>CRM Credentials</h3>
<div>
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="<%=txtCRMOrg.ClientID%>">
Organization</label>
<div class="controls">
<asp:TextBox ID="txtCRMOrg" placeholder="Organization" runat="server" TextMode="SingleLine"></asp:TextBox>
</div>
</div>
<div class="control-group">
<label class="control-label" for="<%=txtCrmDomain.ClientID%>">
Domain</label>
<div class="controls">
<asp:TextBox ID="txtCrmDomain" placeholder="Domain" runat="server" TextMode="SingleLine"></asp:TextBox>
</div>
</div>
<div class="control-group">
<label class="control-label" for="<%=txtCRMUser.ClientID%>">
Username</label>
<div class="controls">
<asp:TextBox ID="txtCRMUser" placeholder="Username" runat="server" TextMode="SingleLine"></asp:TextBox>
</div>
</div>
<div class="control-group">
<label class="control-label" for="<%=txtCRMPassword.ClientID%>">
Password</label>
<div class="controls">
<asp:TextBox ID="txtCRMPassword" placeholder="Password" runat="server" TextMode="Password"></asp:TextBox>
</div>
</div>
<asp:Button CssClass="btn" ID="btnEditCRM" runat="server" Text="Save Changes" OnClick="btnEditCRM_Click" />
</div>
</div>
<h3>CRM Settings</h3>
<div>
<div class="form-horizontal">
<div class="control-group">
<label class="control-label">
Status Reason Filters</label>
<div class="controls">
<asp:CheckBoxList ID="cblCRMStatus" runat="server" CssClass="checkbox"></asp:CheckBoxList>
</div>
</div>
<div class="control-group">
<label class="control-label">
Case Type Filters</label>
<div class="controls">
<asp:CheckBoxList ID="cblCRMType" runat="server" CssClass="checkbox"></asp:CheckBoxList>
</div>
</div>
<asp:Button CssClass="btn" ID="btnEditCRMSettings" runat="server" Text="Save Changes" OnClick="btnEditCRMSettings_Click" />
</div>
</div>
<h3>Work Day Hours</h3>
<div>
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="<%=txtHours.ClientID%>">
Hours</label>
<div class="controls">
<asp:TextBox ID="txtHours" placeholder="Hours" runat="server" TextMode="SingleLine" Width="66px"></asp:TextBox>
</div>
</div>
<asp:Button CssClass="btn" ID="btnEditHours" runat="server" OnClick="btnEditHours_Click" Text="Save Changes" />
</div>
</div>
</div>
I do not know why, but all of the panels / tabs are the height of the longest tab which looks weird. I instead want them all to be the height they need to be.
I tried with and without autoHeight with no luck.
The height is being generated:
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="display: block; height: 1339.21875px;" id="ui-accordion-accordion-panel-0" aria-labelledby="ui-accordion-accordion-header-0" role="tabpanel" aria-expanded="true" aria-hidden="false">
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="ContentPlaceHolder1_txtApi">API Key</label>
<div class="controls">
<input name="ctl00$ContentPlaceHolder1$txtApi" type="text" value="10065f74bdee9f0b7870c1d35f13ad3c" id="ContentPlaceHolder1_txtApi" placeholder="API Key" style="width:304px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="ContentPlaceHolder1_txtEmail">Email</label>
<div class="controls">
<input name="ctl00$ContentPlaceHolder1$txtEmail" type="email" value="[email protected]" id="ContentPlaceHolder1_txtEmail" placeholder="Email" style="width:281px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="ContentPlaceHolder1_txtPassword">Password</label>
<div class="controls">
<input name="ctl00$ContentPlaceHolder1$txtPassword" type="password" id="ContentPlaceHolder1_txtPassword" placeholder="Password" style="width:186px;">
</div>
</div>
<input type="submit" name="ctl00$ContentPlaceHolder1$btnEditPaymo" value="Save Changes" id="ContentPlaceHolder1_btnEditPaymo" class="btn">
</div>
</div>
I am using a JQuery Accordion:
<script language="javascript" type="text/javascript">
$(function () {
var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());
$("#accordion").accordion({
autoHeight: true,
// event: "mousedown",
active: activeIndex,
change: function (event, ui) {
// var index = $(this).accordion("option", "active");
// $("#<% =hidAccordionIndex.ClientID %>").val(index);
}
});
});
</script>
And the HTML:
<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />
<div id="kez_header">
<table class="style1">
<tr>
<td>
<h4>
Company Settings
</h4>
</td>
<td align="right" valign="middle">
</td>
</tr>
</table>
</div>
<div id="accordion">
<h3>Paymo Credentials</h3>
<div>
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="<%=txtApi.ClientID%>">
API Key</label>
<div class="controls">
<asp:TextBox ID="txtApi" placeholder="API Key" runat="server" TextMode="SingleLine" Width="304px"></asp:TextBox>
</div>
</div>
<div class="control-group">
<label class="control-label" for="<%=txtEmail.ClientID%>">
Email</label>
<div class="controls">
<asp:TextBox ID="txtEmail" placeholder="Email" runat="server" TextMode="Email" Width="281px"></asp:TextBox>
</div>
</div>
<div class="control-group">
<label class="control-label" for="<%=txtPassword.ClientID%>">
Password</label>
<div class="controls">
<asp:TextBox ID="txtPassword" placeholder="Password" runat="server" TextMode="Password" Width="186px"></asp:TextBox>
</div>
</div>
<asp:Button CssClass="btn" ID="btnEditPaymo" runat="server" OnClick="btnEditPaymo_Click" Text="Save Changes" />
</div>
</div>
<h3>Paymo Settings</h3>
<div>
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="<%=txtFilter.ClientID%>">
Filters</label>
<div class="controls">
<asp:TextBox ID="txtFilter" placeholder="Filters (Separate by ';')" runat="server" TextMode="SingleLine" Width="200px"></asp:TextBox>
</div>
</div>
<asp:Button CssClass="btn" ID="btnEditPaymoSettings" runat="server" Text="Save Changes" OnClick="btnEditPaymoSettings_Click" />
</div>
</div>
<h3>CRM Credentials</h3>
<div>
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="<%=txtCRMOrg.ClientID%>">
Organization</label>
<div class="controls">
<asp:TextBox ID="txtCRMOrg" placeholder="Organization" runat="server" TextMode="SingleLine"></asp:TextBox>
</div>
</div>
<div class="control-group">
<label class="control-label" for="<%=txtCrmDomain.ClientID%>">
Domain</label>
<div class="controls">
<asp:TextBox ID="txtCrmDomain" placeholder="Domain" runat="server" TextMode="SingleLine"></asp:TextBox>
</div>
</div>
<div class="control-group">
<label class="control-label" for="<%=txtCRMUser.ClientID%>">
Username</label>
<div class="controls">
<asp:TextBox ID="txtCRMUser" placeholder="Username" runat="server" TextMode="SingleLine"></asp:TextBox>
</div>
</div>
<div class="control-group">
<label class="control-label" for="<%=txtCRMPassword.ClientID%>">
Password</label>
<div class="controls">
<asp:TextBox ID="txtCRMPassword" placeholder="Password" runat="server" TextMode="Password"></asp:TextBox>
</div>
</div>
<asp:Button CssClass="btn" ID="btnEditCRM" runat="server" Text="Save Changes" OnClick="btnEditCRM_Click" />
</div>
</div>
<h3>CRM Settings</h3>
<div>
<div class="form-horizontal">
<div class="control-group">
<label class="control-label">
Status Reason Filters</label>
<div class="controls">
<asp:CheckBoxList ID="cblCRMStatus" runat="server" CssClass="checkbox"></asp:CheckBoxList>
</div>
</div>
<div class="control-group">
<label class="control-label">
Case Type Filters</label>
<div class="controls">
<asp:CheckBoxList ID="cblCRMType" runat="server" CssClass="checkbox"></asp:CheckBoxList>
</div>
</div>
<asp:Button CssClass="btn" ID="btnEditCRMSettings" runat="server" Text="Save Changes" OnClick="btnEditCRMSettings_Click" />
</div>
</div>
<h3>Work Day Hours</h3>
<div>
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="<%=txtHours.ClientID%>">
Hours</label>
<div class="controls">
<asp:TextBox ID="txtHours" placeholder="Hours" runat="server" TextMode="SingleLine" Width="66px"></asp:TextBox>
</div>
</div>
<asp:Button CssClass="btn" ID="btnEditHours" runat="server" OnClick="btnEditHours_Click" Text="Save Changes" />
</div>
</div>
</div>
I do not know why, but all of the panels / tabs are the height of the longest tab which looks weird. I instead want them all to be the height they need to be.
I tried with and without autoHeight with no luck.
The height is being generated:
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="display: block; height: 1339.21875px;" id="ui-accordion-accordion-panel-0" aria-labelledby="ui-accordion-accordion-header-0" role="tabpanel" aria-expanded="true" aria-hidden="false">
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="ContentPlaceHolder1_txtApi">API Key</label>
<div class="controls">
<input name="ctl00$ContentPlaceHolder1$txtApi" type="text" value="10065f74bdee9f0b7870c1d35f13ad3c" id="ContentPlaceHolder1_txtApi" placeholder="API Key" style="width:304px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="ContentPlaceHolder1_txtEmail">Email</label>
<div class="controls">
<input name="ctl00$ContentPlaceHolder1$txtEmail" type="email" value="[email protected]" id="ContentPlaceHolder1_txtEmail" placeholder="Email" style="width:281px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="ContentPlaceHolder1_txtPassword">Password</label>
<div class="controls">
<input name="ctl00$ContentPlaceHolder1$txtPassword" type="password" id="ContentPlaceHolder1_txtPassword" placeholder="Password" style="width:186px;">
</div>
</div>
<input type="submit" name="ctl00$ContentPlaceHolder1$btnEditPaymo" value="Save Changes" id="ContentPlaceHolder1_btnEditPaymo" class="btn">
</div>
</div>
- 1 mind putting this in a fiddle? – Brad Commented Apr 11, 2013 at 17:31
1 Answer
Reset to default 9use the height style property:
heightStyle: "content"
See: http://api.jqueryui./accordion/#option-heightStyle