javascript - JQuery Accordion Height issue - Stack Overflow

IT技术

更新时间：2025-04-214

admin管理员组
文章数量:1415491

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>

Share Improve this question edited Apr 26, 2013 at 14:25 Lukasz Koziara 4,3205 gold badges34 silver badges44 bronze badges asked Apr 11, 2013 at 17:30 jmasterx 54.3k99 gold badges328 silver badges574 bronze badges

1 mind putting this in a fiddle? – Brad Commented Apr 11, 2013 at 17:31

Add a ment |

1 Answer 1

Sorted by: Reset to default 9

use the height style property:

heightStyle: "content"

See: http://api.jqueryui./accordion/#option-heightStyle

本文标签： javascriptJQuery Accordion Height issueStack Overflow

版权声明：本文标题：javascript - JQuery Accordion Height issue - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1745181439a2646483.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - JQuery Accordion Height issue - Stack Overflow

1 Answer 1

更多相关文章