JQuery Accordion Height问题

时间:2013-04-11 17:30:22

标签: javascript jquery html css jquery-ui

我正在使用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>

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>

我不知道为什么,但所有面板/标签都是最长标签的高度,看起来很奇怪。我反而希望他们都成为他们需要的高度。

我尝试了没有autoHeight,没有运气。

正在生成高度:

<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="joshua_larouche@hotmail.com" 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 个答案:

答案 0 :(得分:8)

使用高度样式属性:

heightStyle: "content"

请参阅:http://api.jqueryui.com/accordion/#option-heightStyle