locked
Create a dynamic scrollable section for repeater items and statis position for top and bottom content in CSS RRS feed

  • 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>

    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:

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

    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