div覆盖asp.net页面中的更新面板

时间:2016-03-13 20:15:11

标签: javascript html css asp.net ajax

我在ASP.NET网站上显示元素时遇到了一些问题。我正在尝试创建一个简单的聊天应用程序。如果您查看,请参阅下面的.aspx代码,您会看到我的UpdatePanel内有一个部分。本节包含四个div。现在,我的工作几乎没问题。我的意思是,最后<div>不应该真正进入UpdatePanel,因为它会使每个帖子都刷新<asp:TextBox>,我需要使用一些javascript将光标移动到结束了。但它很烦人,不能像我想的那样工作:

<form id="form1" runat="server" defaultbutton="btnSend" defaultfocus="tBox">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:Timer runat="server" ID="updateTimer" OnTick="updateTimer_Tick" Interval="3000"></asp:Timer>
        <asp:UpdatePanel runat="server" UpdateMode="Conditional">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="updateTimer"/>
            </Triggers>
            <ContentTemplate>
                <section>
                    <div style="background-color:plum;text-align:center;" runat="server">    
                        <asp:Label ID="lblWelcome" runat="server" Text="Czat rodzinny :)"></asp:Label>
                    </div>
                    <div id="one" style="overflow-y:scroll;">
                        <asp:Literal runat="server" ID="litMessages"></asp:Literal>
                    </div>
                    <div id="two" style="overflow-y:scroll";>
                        <asp:Literal runat="server" ID="litUsers"></asp:Literal>
                    </div>
                    <div>
                        <asp:TextBox runat="server" ID="tBox" Width="70%"></asp:TextBox>
                        <ajaxToolkit:FilteredTextBoxExtender runat="server" FilterType="Custom" InvalidChars="><" FilterMode="InvalidChars" TargetControlID="tBox"/>
                        <asp:Button runat="server" Text="Wyślij" Width="5%" ID="btnSend" OnClick="btnSend_Click"/>
                        <asp:Label runat="server" Width="4%">Kolor:</asp:Label>
                        <asp:DropDownList ID="ddlColors" runat="server"  Width="13%" ></asp:DropDownList>
                        <asp:Button runat="server" Text="Wyloguj" Width="6%" />
                    </div>                              
                </section>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>

所以,我想移动这个<div> to be after UpdatePanel`。但是当我这样做时,它会显示如下图所示: enter image description here

所以,正如你所看到的,它没有显示在下面,但它覆盖了<section>,我不知道为什么。下面是CSS:

        section{
            width: 100%;
            height: 80vh;
            background: aqua;     
            display:table;   
        }

        div#one {
        width: 80%;
        height: 100%;
        background-color:white;
        border-style:solid;
        border-width:5px;
        border-color:brown;
        float: left;
        box-sizing:border-box;
        }

        div#two {
        width: 20%;
        height: 100%;
        background-color:white;
        border-style:solid;
        border-width:5px;
        border-color:brown;
        float: left;
        box-sizing:border-box;
        }

        #tBox{
            vertical-align:bottom;
        }

        .text, .image, .block {display:table-cell;}
         div, img { vertical-align:middle;}

我做错了什么?任何提示将不胜感激。

0 个答案:

没有答案