I found something promising here <https://jsfiddle.net/L56wxhqm/678/>.

On Wed, Mar 18, 2020 at 7:48 PM Maurice Waka <mauricew...@gmail.com> wrote:

> I have used this
> <http://web2py.com/books/default/chapter/29/12/components-and-plugins#LOAD>
> example and noticed that with more items submitted, the textarea keeps
> moving down.
> How can I keep it sticky at the bottom of the page as the items scroll
> with more submissions.
> This is my code.
>
> {{for post in posts:}}
>
> <style>
> .body {
>     left:0;
>     top: -10px;
>     display: table;
>     width: 100%;
>     max-height: 35em;
> }
> .message right appeared{
>     background-color: #38D9D6;
>     float: right;
>     display: inline-block;
>     max-height: 150px;
>     width:90%;
>     border-radius: 15px 1px 15px 15px;
>     padding: 4px;
>     text-align: center;
>     -ms-word-break: break-all;
>     word-break: break-all;
>     word-break: break-word;
>     -ms-hyphens: auto;
>     -moz-hyphens: auto;
>     hyphens: auto;
>     -webkit-hyphens: auto;
>     overflow-wrap: break-word;
>     word-wrap: break-word;
>     font-family:'Josefin Slab Thin';
>     }
>     .message left appeared{
>     background-color: #38D9D6;
>     float: left;
>     display: inline-block;
>     max-height: 150px;
>     width:90%;
>     border-radius: 15px 1px 15px 15px;
>     padding: 4px;
>     text-align: center;
>     -ms-word-break: break-all;
>     word-break: break-all;
>     word-break: break-word;
>     -ms-hyphens: auto;
>     -moz-hyphens: auto;
>     hyphens: auto;
>     -webkit-hyphens: auto;
>     overflow-wrap: break-word;
>     word-wrap: break-word;
>     font-family:'Josefin Slab Thin';
>     }
>     .bottom_wrapper .send_message {
>          width: 140px;
>          height: 40px;
>          display: inline-block;
>          border-radius: 50px;
>          background-color: #a3d063;
>          border: 2px solid #a3d063;
>          color: #38D9D6;
>          cursor: pointer;
>          transition: all 0.2s linear;
>          text-align: center;
>          float: right;
>         }
>         .bottom_wrapper .send_message:hover {
>          color: #a3d063;
>          background-color: #fff;
>         }
>         .bottom_wrapper .send_message .text {
>          font-size: 18px;
>          font-weight: 300;
>          display: inline-block;
>          line-height: 48px;
>         }
>     #bottom_wrapper {
>             left:0;
>             bottom: 0;
>             position: fixed;
>             width: 100%;
>             height: 5.0em;
>             color: black;
>             background-color: white;
>             font-family: "Josefin Slab";
>             text-align: center;
>         }
>     #footer{
>         background-color:red;
>         position:fixed;
>         bottom:0px;
>         left:0px;
>         right:0px;
>         height:50px;
>         margin-bottom:0px;
>     }
>
> </style>
> <div>
>     <div class="row">
>         <div class="col-lg-12" >
>             <div class="message right appeared" class="posts"
> style="background-color:yellow;">
>               On {{=post.created_on}} {{=post.created_by}}
>               says <blockquote
> class="posts_body">{{=post.message}}</blockquote>
>             </div>
>         </div>
>     </div>
>     <div class="row">
>         <div class="col-lg-12" >
>             <div class="message left appeared" class="posts"
> style="background-color:blue;">
>               {{for reply in replies:}}
>               On {{=reply.created_on}} {{=reply.created_by}}
>               says <blockquote
> class="replies_body">{{=reply.message}}</blockquote>
>             </div>
>             <br>
>             {{pass}}
>             {{pass}}
>         </div>
>     </div>
>
>     <div class="bottom_wrapper" id="footer">
>         {{=form.custom.begin}}
>             <div class="row">
>                 <div class="col-lg-8" >
>                 {{=form.custom.widget.message}}
>                 </div>
>                 <div class="col-lg-4" >
>                 {{=form.custom.submit}}
>             </div>
>         {{=form.custom.end}}
>     </div>
> </div>
>
> --
> Resources:
> - http://web2py.com
> - http://web2py.com/book (Documentation)
> - http://github.com/web2py/web2py (Source code)
> - https://code.google.com/p/web2py/issues/list (Report Issues)
> ---
> You received this message because you are subscribed to a topic in the
> Google Groups "web2py-users" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/web2py/rb6GSc9ZpBI/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> web2py+unsubscr...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/web2py/10afc053-64c1-4509-8d6a-7655a1484852%40googlegroups.com
> <https://groups.google.com/d/msgid/web2py/10afc053-64c1-4509-8d6a-7655a1484852%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
>

-- 
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
--- 
You received this message because you are subscribed to the Google Groups 
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to web2py+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/web2py/CALkNK57WNAhFBWP63t3n3prryeauSjpLFdbntpHeBNrQEq%3DWhg%40mail.gmail.com.

Reply via email to