cms_toolbar: page content is moved out of sight #1105

Closed
krawalli opened this Issue Dec 1, 2011 · 3 comments

Comments

Projects
None yet
4 participants

krawalli commented Dec 1, 2011

In a ftresh 2.2.0 install the content of a page ist moved some pixel out of the browser window (and so its content is hidden) when:

  • {% cms_toolbar %} is in the template
  • you are logged in as admin

When you unhide the toolbar and activate the edit mode, then all content is shown, even if you turn the edit mode off again. Unfortunatly it lasts until you refresh/reload you page. So maybe this is caused by the cms_toolbar's js.

FinalAngel was assigned Dec 21, 2011

quinox commented Aug 15, 2012

Ran into the same problem, solved it by modyfing cms.toolbar.js:

--- cms.toolbar.js.original 2012-08-15 14:17:29.000000000 +0200
+++ cms.toolbar.js  2012-08-15 14:31:33.000000000 +0200
@@ -19,6 +19,9 @@
     */
    CMS.Toolbar = CMS.Class.$extend({

+       TOOLBAR_HEIGHT: 43, // Height including border, as specified in the CSS
+       TOOLBAR_BORDER: 1, // As specified in the CSS
+
        implement: [CMS.API.Helpers, CMS.API.Security],

        options: {
@@ -59,7 +62,14 @@
            var that = this;

            // scheck if toolbar should be shown or hidden
-           ($.cookie('CMS_toolbar-collapsed') == 'false') ? this.toolbar.data('collapsed', true) : this.toolbar.data('collapsed', false);
+           if ($.cookie('CMS_toolbar-collapsed') == 'false') {
+               this.toolbar.data('collapsed', true);
+           } else {
+               this.toolbar.data('collapsed', false);
+               // We have to temp. increase the padding, otherwise hiding the toolbar would give us negative margin.
+               var padding = parseInt($(document.body).css('margin-top'));
+               $(document.body).css('margin-top', (padding+this.TOOLBAR_HEIGHT));
+           }
            // follow up script to set the current state
            this.toggleToolbar();

@@ -101,7 +111,7 @@
        _showToolbar: function () {
            // add toolbar padding
            var padding = parseInt($(document.body).css('margin-top'));
-               $(document.body).css('margin-top', (padding+43)); // 43 = height of toolbar
+               $(document.body).css('margin-top', (padding+this.TOOLBAR_HEIGHT));
            // show toolbar
            this.toolbar.show();
            // change data information
@@ -118,7 +128,7 @@
        _hideToolbar: function () {
            // remove toolbar padding
            var padding = parseInt($(document.body).css('margin-top'));
-               $(document.body).css('margin-top', (padding-this.toolbar.height()-1)); // substract 1 cause of the border
+               $(document.body).css('margin-top', (padding-this.toolbar.height()-this.TOOLBAR_BORDER));
            // hide toolbar
            this.toolbar.hide();
            // change data information

RuuPiE commented Nov 7, 2012

Until this issue is solved I fixed it in another 'hackish' way, without modifying django-cms codebase.

        {% if request.user.is_staff %}
            {# Hack to temporary fix issue: https://github.com/divio/django-cms/issues/1105 #}
            <script type="text/javascript">
                jQuery(document).ready(function () {
                    var padding = parseInt($(document.body).css('margin-top'));
                    if (padding < 0) {
                        $(document.body).css('margin-top', '0px');
                    }
                });
            </script>
        {% endif %}
Owner

FinalAngel commented May 21, 2013

This issue should be fixed with 3.0 as the toolbar behaves different

FinalAngel closed this May 21, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment