Asked by:
Create a dynamic scrollable section for repeater items and statis position for top and bottom content in CSS

Question
-
User1909155429 posted
i have a messaging insert form. The problem is that when i insert content in a entry form below the page, the repeater content increases in length shoving the insert form out of focus and i have to keep moving the scrollbar to re position focus. I would prefer to fix the top and bottom section so it is visible at all times, while allowing the dynamic repeater data to be scrollable with a suitable size window. I have provided the html code below.
<div>
<table id="TblReadMessages" width="100%" style="border:thin solid silver" cellpadding="10" rules="all" >
<tr>
<td width="10%" scope="col" >
Sender:
</td>
<td width="90%" scope="col" >
<asp:Label ID="lblSender" ForeColor="Brown" runat="server"></asp:Label></td>
</tr>
<tr>
<td width="10%" scope="col" >
Receiver</td>
<td width="90%" scope="col" >
<asp:Label ID="lblReciever" ForeColor="DarkBlue" runat="server"></asp:Label></td>
</tr>
<tr>
<td width="10%" scope="col" >
Subject:
</td>
<td width="90%" >
<asp:Label ID="lblSubject" runat="server"></asp:Label></td>
</tr>
<tr>
<td width="10%" scope="col" >
Date:</td>
<td width="90%" scope="col" >
<asp:Label ID="lblDate" runat="server"></asp:Label></td>
</tr>
<tr>
<td width="10%" valign="top" scope="col" >
Message:
</td>
<td width="90%" valign="top" align="left" scope="col" >
<asp:HiddenField ID="MessageID" runat="server" />
<asp:Label ID="lblBody" runat="server" Width="90%" style=" overflow:auto; height:auto; min-width:60%; max-width:90%; font-weight:bold"></asp:Label>
</td>
</tr></table>
<asp:Repeater ID="RepCorrespondance" runat="server">
<HeaderTemplate>
<table width="100%" valign="top" id="TblRepeater" style=" border-bottom-color:Black; border-bottom-style:solid; border-bottom-width:medium " >
<tr class="header" >
<td valign="top" scope="row" align="left" colspan="2" bgcolor="#cccccc" style="caption-side:bottom; color:#000000; ">Correspondance:</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr >
<td align="left" style="padding:10PX">
<asp:Label ID="lblSender" runat="server" STYLE="padding:5PX; text-decoration:UNDERLINE; " Text='<%#DataBinder.Eval(Container,"DataItem.senderID")%>'></asp:Label>
</td>
<td align="right">
<asp:Label ID="lblDate" runat="server" Text='<%#DataBinder.Eval(Container,"DataItem.datentime")%>'></asp:Label>
</td>
</tr>
<tr>
<td align="left" colspan="2">
<strong><asp:Label ID="lblBody" runat="server" Text='<%#DataBinder.Eval(Container,"DataItem.Body")%>'></asp:Label></strong>
</td>
</tr>
</ItemTemplate>
<SeparatorTemplate><tr><td colspan="2"><hr /></td></tr></SeparatorTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater><table>
<tr style="height:200px">
<td align="left" width="18%" valign="middle" >
<strong>Reply:</strong>
</td>
<td >
<asp:TextBox ID="TxtReply" Columns="70" Rows="8" style="" TextMode="MultiLine" runat="server"></asp:TextBox> <asp:Button ID="btnForward" STYLE=" ; vertical-align:top;" runat="server" OnClick="btnForward_Click" Text="Report" />
</td>
</tr>
<tr>
<td width="18%"></td>
<td width="90%">
<asp:Button ID="btnDone" runat="server" OnClick="btnDone_Click" Text="Done" STYLE="margin-right:50PX"/>
<asp:Button ID="btnReply" runat="server" OnClick="btnReply_Click" Text="Reply" />
</td>
</tr>
</table></div>
Friday, August 7, 2020 12:21 PM
All replies
-
User1535942433 posted
Hi peterthegreat,
Accroding to your description,you could use flex-direction: column-reverse to scrollable content div.
Just like this:
html, body { height:100%; margin:0; padding:0; } .chat-window{ display:flex; flex-direction:column; height:100%; } .chat-messages{ flex: 1; height:100%; overflow: auto; display: flex; flex-direction: column-reverse; } .chat-input { border-top: 1px solid #999; padding: 20px 5px } .chat-input-text { width: 60%; min-height: 40px; max-width: 60%; } /* temp. buttons for demo */ button { width: 12%; height: 44px; margin-left: 5%; vertical-align: top; } /* begin - fix for hidden scrollbar in IE/Edge/Firefox */ .chat-messages-text{ overflow: auto; } @media screen and (-webkit-min-device-pixel-ratio:0) { .chat-messages-text{ overflow: visible; } /* reset Edge as it identifies itself as webkit */ @supports (-ms-accelerator:true) { .chat-messages-text{ overflow: auto; } } } /* hide resize FF */ @-moz-document url-prefix() { .chat-input-text { resize: none } } /* end - fix for hidden scrollbar in IE/Edge/Firefox */ function addContent () { var msgdiv = document.getElementById('messages'); var msgtxt = document.getElementById('inputs'); var atbottom = scrollAtBottom(msgdiv); if (msgtxt.value.length > 0) { msgdiv.innerHTML += msgtxt.value + '<br/>'; msgtxt.value = ""; } else { msgdiv.innerHTML += 'Long long content ' + (tempCounter++) + '!<br/>'; } /* if at bottom and is IE/Edge/Firefox */ if (atbottom && (!isWebkit || isEdge)) { updateScroll(msgdiv); } } function resizeInput () { var msgdiv = document.getElementById('messages'); var msgtxt = document.getElementById('inputs'); var atbottom = scrollAtBottom(msgdiv); if (msgtxt.style.height == '120px') { msgtxt.style.height = 'auto'; } else { msgtxt.style.height = '120px'; } /* if at bottom and is IE/Edge/Firefox */ if (atbottom && (!isWebkit || isEdge)) { updateScroll(msgdiv); } } /* fix for IE/Edge/Firefox */ var isWebkit = ('WebkitAppearance' in document.documentElement.style); var isEdge = ('-ms-accelerator' in document.documentElement.style); var tempCounter = 6; function updateScroll(el){ el.scrollTop = el.scrollHeight; } function scrollAtBottom(el){ return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight)); } <div class="chat-window"> <div class="chat-messages"> <div class="chat-messages-text" id="messages"> Long long content 1!<br/> Long long content 2!<br/> Long long content 3!<br/> Long long content 4!<br/> Long long content 5!<br/> </div> </div> <div class="chat-input"> <textarea class="chat-input-text" placeholder="Type your message here..." id="inputs"></textarea> <button onclick="addContent();">Add msg</button> <button onclick="resizeInput();">Resize input</button> </div> </div>
More details,you could refer to below article:
Best regards,
Yijing Sun
Monday, August 10, 2020 6:06 AM -
User1909155429 posted
It appears a great program. The only trouble is i am operating IE version 10 and it wont deal with Flex rule!
Is there a alternative approach? In the meantime while looking for an answer i tried using fixed position and overflow:hidden on div with repeater table inside. When i postback new text entry it does not show at bottom of the div. It is hidden from view until next data entry is performed.
Sunday, August 16, 2020 6:52 PM -
User1535942433 posted
Hi peterthegreat,
Accroding to your description,as far as I think,it is a great approach.However,flex-direction: column-reverse is a bug in IE/Edge/Firefox.So,you could fix the problem with switching to column the scroll bar works on all browsers.
More details,you could refer to below article:
https://stackoverflow.com/questions/34249501/flexbox-column-reverse-in-firefox-edge-and-ie
Best regards,
Yijing Sun
Tuesday, August 18, 2020 8:19 AM