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>&nbsp;<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>

Answer 1

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:

https://stackoverflow.com/questions/34213227/scrollable-div-to-stick-to-bottom-when-outer-div-changes-in-size

Best regards,

Yijing Sun

Answer 2

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.

Answer 3

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