Fix issue #1547

build/js/Layout.js

@@ -26,7 +26,8 @@
     sidebar       : '.sidebar',
     controlSidebar: '.control-sidebar',
     fixed         : '.fixed',
-    sidebarMenu   : '.sidebar-menu'
+    sidebarMenu   : '.sidebar-menu',
+    logo          : '.main-header .logo'
   }
 
   var ClassName = {
@@ -57,7 +58,13 @@
       $(window).resize(function () {
         this.fix()
         this.fixSidebar()
+
+        $(Selector.logo + ', ' + Selector.sidebar).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
+          this.fix()
+          this.fixSidebar()
         }.bind(this))
+      }.bind(this))
+
       this.bindedResize = true
     }
 
@@ -82,25 +89,25 @@
     var windowHeight  = $(window).height()
     var sidebarHeight = $(Selector.sidebar).height() || 0
 
-    // Set the min-height of the content and sidebar based on the
+    // Set the min-height of the content and sidebar based on
     // the height of the document.
     if ($('body').hasClass(ClassName.fixed)) {
       $(Selector.contentWrapper).css('min-height', windowHeight - footerHeight)
     } else {
-      var postSetWidth
+      var postSetHeight
 
       if (windowHeight >= sidebarHeight) {
         $(Selector.contentWrapper).css('min-height', windowHeight - neg)
-        postSetWidth = windowHeight - neg
+        postSetHeight = windowHeight - neg
       } else {
         $(Selector.contentWrapper).css('min-height', sidebarHeight)
-        postSetWidth = sidebarHeight
+        postSetHeight = sidebarHeight
       }
 
       // Fix for the control sidebar height
       var $controlSidebar = $(Selector.controlSidebar)
       if (typeof $controlSidebar !== 'undefined') {
-        if ($controlSidebar.height() > postSetWidth)
+        if ($controlSidebar.height() > postSetHeight)
           $(Selector.contentWrapper).css('min-height', $controlSidebar.height())
       }
     }

build/less/sidebar.less

@@ -3,10 +3,7 @@
  * ------------------
  */
 // Main Sidebar
-// ``` .left-side has been deprecated as of 2.0.0 in favor of .main-sidebar ```
+.main-sidebar {
-
-.main-sidebar,
-.left-side {
   position: absolute;
   top: 0;
   left: 0;
@@ -14,21 +11,25 @@
   min-height: 100%;
   width: @sidebar-width;
   z-index: 810;
+
   // Using disposable variable to join statements with a comma
-  @transition-rule: @transition-speed @transition-fn,
+  @transition-rule: @transition-speed @transition-fn, width @transition-speed @transition-fn;
-  width @transition-speed @transition-fn;
   .transition-transform(@transition-rule);
+
   @media (max-width: @screen-header-collapse) {
     padding-top: 100px;
   }
+
   @media (max-width: @screen-xs-max) {
     .translate(-@sidebar-width, 0);
   }
+
   .sidebar-collapse & {
     @media (min-width: @screen-sm) {
       .translate(-@sidebar-width, 0);
     }
   }
+
   .sidebar-open & {
     @media (max-width: @screen-xs-max) {
       .translate(0, 0);
@@ -40,7 +41,7 @@
   padding-bottom: 10px;
 }
 
-// remove border from form
+// Remove border from form
 .sidebar-form {
   input:focus {
     border-color: transparent;

dist/css/AdminLTE.css

@@ -415,8 +415,7 @@ a:focus {
  * Component: Sidebar
  * ------------------
  */
-.main-sidebar,
+.main-sidebar {
-.left-side {
   position: absolute;
   top: 0;
   left: 0;
@@ -430,14 +429,12 @@ a:focus {
   transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
 }
 @media (max-width: 767px) {
-  .main-sidebar,
+  .main-sidebar {
-  .left-side {
     padding-top: 100px;
   }
 }
 @media (max-width: 767px) {
-  .main-sidebar,
+  .main-sidebar {
-  .left-side {
     -webkit-transform: translate(-230px, 0);
     -ms-transform: translate(-230px, 0);
     -o-transform: translate(-230px, 0);
@@ -445,8 +442,7 @@ a:focus {
   }
 }
 @media (min-width: 768px) {
-  .sidebar-collapse .main-sidebar,
+  .sidebar-collapse .main-sidebar {
-  .sidebar-collapse .left-side {
     -webkit-transform: translate(-230px, 0);
     -ms-transform: translate(-230px, 0);
     -o-transform: translate(-230px, 0);
@@ -454,8 +450,7 @@ a:focus {
   }
 }
 @media (max-width: 767px) {
-  .sidebar-open .main-sidebar,
+  .sidebar-open .main-sidebar {
-  .sidebar-open .left-side {
     -webkit-transform: translate(0, 0);
     -ms-transform: translate(0, 0);
     -o-transform: translate(0, 0);

dist/css/alt/AdminLTE-without-plugins.css

@@ -416,8 +416,7 @@ a:focus {
  * Component: Sidebar
  * ------------------
  */
-.main-sidebar,
+.main-sidebar {
-.left-side {
   position: absolute;
   top: 0;
   left: 0;
@@ -431,14 +430,12 @@ a:focus {
   transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
 }
 @media (max-width: 767px) {
-  .main-sidebar,
+  .main-sidebar {
-  .left-side {
     padding-top: 100px;
   }
 }
 @media (max-width: 767px) {
-  .main-sidebar,
+  .main-sidebar {
-  .left-side {
     -webkit-transform: translate(-230px, 0);
     -ms-transform: translate(-230px, 0);
     -o-transform: translate(-230px, 0);
@@ -446,8 +443,7 @@ a:focus {
   }
 }
 @media (min-width: 768px) {
-  .sidebar-collapse .main-sidebar,
+  .sidebar-collapse .main-sidebar {
-  .sidebar-collapse .left-side {
     -webkit-transform: translate(-230px, 0);
     -ms-transform: translate(-230px, 0);
     -o-transform: translate(-230px, 0);
@@ -455,8 +451,7 @@ a:focus {
   }
 }
 @media (max-width: 767px) {
-  .sidebar-open .main-sidebar,
+  .sidebar-open .main-sidebar {
-  .sidebar-open .left-side {
     -webkit-transform: translate(0, 0);
     -ms-transform: translate(0, 0);
     -o-transform: translate(0, 0);

dist/js/adminlte.js

@@ -45,7 +45,8 @@ throw new Error('AdminLTE requires jQuery')
     sidebar       : '.sidebar',
     controlSidebar: '.control-sidebar',
     fixed         : '.fixed',
-    sidebarMenu   : '.sidebar-menu'
+    sidebarMenu   : '.sidebar-menu',
+    logo          : '.main-header .logo'
   }
 
   var ClassName = {
@@ -76,7 +77,13 @@ throw new Error('AdminLTE requires jQuery')
       $(window).resize(function () {
         this.fix()
         this.fixSidebar()
+
+        $(Selector.logo + ', ' + Selector.sidebar).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
+          this.fix()
+          this.fixSidebar()
         }.bind(this))
+      }.bind(this))
+
       this.bindedResize = true
     }
 
@@ -101,7 +108,7 @@ throw new Error('AdminLTE requires jQuery')
     var windowHeight  = $(window).height()
     var sidebarHeight = $(Selector.sidebar).height() || 0
 
-    // Set the min-height of the content and sidebar based on the
+    // Set the min-height of the content and sidebar based on
     // the height of the document.
     if ($('body').hasClass(ClassName.fixed)) {
       $(Selector.contentWrapper).css('min-height', windowHeight - footerHeight)