I think you have something messed up with the code you posted.
Specifically, the for loop and the two {{pass}} statements.
It is important to pay attention to how the python statements in your html
will affect the matching closing elements in the generated html.
I'd look at a fix something like this - not tested
<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>
{{for post in posts:}}
<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" >
{{for reply in replies:}}
<div class="message left appeared" class="posts" style="
background-color:blue;">
On {{=reply.created_on}} {{=reply.created_by}}
says <blockquote class="replies_body">{{=reply.message}}
</blockquote>
</div>
<br>
{{pass}}
</div>
</div>
</div>
{{pass}}
<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>
On Wednesday, March 18, 2020 at 2:45:51 PM UTC-5, Maurice Waka wrote:
> I found something promising here <https://jsfiddle.net/L56wxhqm/678/>.
>
> On Wed, Mar 18, 2020 at 7:48 PM Maurice Waka <mauri...@gmail.com
> <javascript:>> 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
>> web...@googlegroups.com <javascript:>.
>> 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/bf1edca1-3937-4f31-9959-64cf9a60c4fc%40googlegroups.com.
