diff --git a/src/view.multiview.js b/src/view.multiview.js
index 52481e85..c69612b6 100644
--- a/src/view.multiview.js
+++ b/src/view.multiview.js
@@ -299,16 +299,14 @@ my.MultiView = Backbone.View.extend({
     this.el.find('.navigation a').removeClass('active');
     var $el = this.el.find('.navigation a[data-view="' + pageName + '"]');
     $el.addClass('active');
-    // show the specific page
+
+    // add/remove sidebars and hide inactive views
     _.each(this.pageViews, function(view, idx) {
       if (view.id === pageName) {
         view.view.el.show();
         if (view.view.elSidebar) {
           view.view.elSidebar.show();
         }
-        if (view.view.show) {
-          view.view.show();
-        }
       } else {
         view.view.el.hide();
         if (view.view.elSidebar) {
@@ -319,6 +317,18 @@ my.MultiView = Backbone.View.extend({
         }
       }
     });
+
+    this._showHideSidebar();
+
+    // call view.view.show after sidebar visibility has been determined so
+    // that views can correctly calculate their maximum width
+    _.each(this.pageViews, function(view, idx) {
+      if (view.id === pageName) {
+        if (view.view.show) {
+          view.view.show();
+        }
+      }
+    });
   },
 
   _onMenuClick: function(e) {
@@ -333,7 +343,6 @@ my.MultiView = Backbone.View.extend({
     var viewName = $(e.target).attr('data-view');
     this.updateNav(viewName);
     this.state.set({currentView: viewName});
-    this._showHideSidebar();
   },
 
   // create a state object for this view and do the job of