See #54. Move the flashing message to absolute positionning to avoid annoying shifting of the bills list.

1 files changed, 5 insertions, 3 deletions

diff --git a/budget/templates/layout.html b/budget/templates/layout.html
index c8f8df8..6ac0a3a 100644
--- a/budget/templates/layout.html
+++ b/budget/templates/layout.html
@@ -9,6 +9,8 @@
     {% block head %}{% endblock %}
     <script type="text/javascript" charset="utf-8">
         $(document).ready(function(){
+            var left = window.innerWidth/2-$('.flash').width()/2;
+            $(".flash").css({ "left": left+"px", "top":"45px" });
             setTimeout(function(){
                 $(".flash").fadeOut("slow", function () {
                     $(".flash").remove();
@@ -80,13 +82,13 @@
 <div class="container-fluid" style="height: 100%; padding-left: 10px;">
     {% block sidebar %}{% endblock %}
     <div class="content" style="margin-left: 250px;">
-    {% for message in get_flashed_messages() %}
-        <div class="flash alert-message info"><p>{{ message }}</p></div>
-    {% endfor %}
     {% block content %}
     {% endblock %}
     </div>
 </div>
+    {% for message in get_flashed_messages() %}
+        <div class="flash alert-message info" style="position:absolute;"><p>{{ message }}</p></div>
+    {% endfor %}
 {% endblock %}
 {% block footer %}
 <div id="footer">