sticky footer:How to make it stick

[Maurice Waka]

I have used this 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>

[Maurice Waka]

I found something promising here.

--
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+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/10afc053-64c1-4509-8d6a-7655a1484852%40googlegroups.com.

[Jim S]

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

{{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}}
 

To unsubscribe from this group and all its topics, send an email to web...@googlegroups.com.

[Maurice Waka]

Thank you.

It now works for me.

To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/bf1edca1-3937-4f31-9959-64cf9a60c4fc%40googlegroups.com.