Thank you.
It now works for me.
On Wed, Mar 18, 2020 at 11:05 PM Jim S <ato.st...@gmail.com> wrote:
> 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> 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.
>>> 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 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/bf1edca1-3937-4f31-9959-64cf9a60c4fc%40googlegroups.com
> <https://groups.google.com/d/msgid/web2py/bf1edca1-3937-4f31-9959-64cf9a60c4fc%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/CALkNK54hqGEsferUt1oTGf8M%2BnTf24XrzvVw%2B7rDKDpZWyNo6A%40mail.gmail.com.
