<div class="bubbleWrapper" >
<div class="row">
<div class="col-lg-12">
<div class="message right appeared">
{{if post.message:}}
{{=post.created_on}}
<blockquote style="background-color:#38D9D6;color:black; border-radius: 15px 1px 15px 15px; box-shadow: 4px 4px 10px #E5787A;">
{{=post.message}}</blockquote>
{{else:}}
{{pass}}
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="message left appeared">
{{if post.answer:}}
{{=post.created_on}}
<blockquote style="background-color: #EFF2F2;border-radius: 15px 15px 15px 1px;">
{{=post.answer}}</blockquote>
{{else:}}
{{pass}}
</div>
</div>
</div>
</div>
{{pass}}
<div class="bottom_wrapper" align="center" id="footer">
{{=form.custom.begin}}
<div class="col-md-1 col-lg-2"></div>
<div class = "col-xs-8 col-md-6" style="text-align: center;">
{{=form.custom.widget.message}}
</div>
<div class = "col-xs-4 col-md-4">
{{=form.custom.submit}}
</div>
{{=form.custom.end}}
</div>
<script>
scrollingElement = (document.scrollingElement || document.body)
function scrollToBottom () {
scrollingElement.scrollTop = scrollingElement.scrollHeight;
}
function scrollToTop (id) {
scrollingElement.scrollTop = 0;
}
//Require jQuery
function scrollSmoothToBottom (id) {
$(scrollingElement).animate({
scrollTop: document.body.scrollHeight
}, 1500);
}
</script>