javascript - 在 asp:panel 中以 display:none 开头时，Ajax ComboBox 无法正确呈现

Question

我在 asp:panel 中有一个 Ajax ComboBox。该面板分配了我的 CssClass="hide"，其中包括“display:none”。

用户可以单击另一个触发 JavaScript 函数的元素，该函数在 CssClass="hide" 和 CssClass="show" 之间切换面板（“show”包括“width:100%”，这会导致面板中的所有控件显示，除了组合框上的箭头图像

如果我将面板设置为以 CssClass="show" 开始生活，一切都会正确显示。然后我可以使用该函数将其更改为 CssClass="hide" 然后返回 CssClass="show" 一切看起来仍然正确！

感谢您的帮助。

--------- 我的 ASPX --------

        <ajaxToolkit:TabContainer ID="tabcontainerProject" runat="server" Width="100%" ActiveTabIndex="1">
            <ajaxToolkit:TabPanel ID="tpnlUpdateInformation" runat="server" HeaderText="Update Information">
                <ContentTemplate>
                     <span id="spanPositions" class="lnkempty" onclick="togglepnlPositions();">Project Team</span>
                      <br />
                      <asp:Panel ID="pnlPositions" runat="server" cssclass="hide">   
                          <ajaxToolkit:ComboBox ID="cbxOwner" runat="server"
                               DataSourceID="sqlOwner" DataTextField="Owner" DataValueField="Owner"
                               DropDownStyle="DropDown" AutoCompleteMode="SuggestAppend"
                               ItemInsertLocation="OrdinalText" CssClass="AquaStyle"
                               AutoPostBack="false">
                          </ajaxToolkit:ComboBox>
                      </asp:Panel>
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
        </ajaxToolkit:TabContainer>

--------- 我的 JavaScript --------

var stickypnlPositions = 0
function togglepnlPositions() {
    pnlPositions = document.getElementById('MainContent_tabcontainerProject_tpnlUpdateInformation_pnlPositions');
    if (stickypnlPositions === 0) {
        pnlPositions.setAttribute('class', 'show');
        stickypnlPositions = 1;
    } else {
        pnlPositions.setAttribute('class', 'hide');
        stickypnlPositions = 0;
    }
}

--------- 我的 CSS --------

.AquaStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input {
    margin: 0;
    background-image: url(../Images/Ajax/Aqua/aqua-bg.gif);
    background-position: top left;
    border: 0px none;
    padding: 2px 0px 0px 8px;
    /* font-size: 11px; */
    font-size: 13px;
    height: 17px;
    width: 150px;
}

.AquaStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button {
    background-image: url(../Images/Ajax/Aqua/aqua-arrow.gif);
    background-position: top left;
    border: 0px none;
    height: 19px;
    width: 19px;
    vertical-align: top;
}

.AquaStyle .ajax__combobox_itemlist {
    border-color: #000000;
    background-color: #FFFFFF;
}

标签： javascriptcssajaxcombobox