diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js
index bac2a5ebd2..699f884ba2 100644
--- a/apps/files/js/detailsview.js
+++ b/apps/files/js/detailsview.js
@@ -96,16 +96,6 @@
 		 * Renders this details view
 		 */
 		render: function() {
-			// remove old instances
-			var $appSidebar = $('#app-sidebar');
-			if ($appSidebar.length === 0) {
-				this.$el.insertAfter($('#app-content'));
-			} else {
-				if ($appSidebar[0] !== this.el) {
-					$appSidebar.replaceWith(this.$el);
-				}
-			}
-			
 			var templateVars = {
 				closeLabel: t('files', 'Close')
 			};
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 94fdada937..047837cd9d 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -584,11 +584,35 @@
 			}
 
 			this._currentFileModel = model;
+
+			this._replaceDetailsViewElementIfNeeded();
+
 			this._detailsView.setFileInfo(model);
-			this._detailsView.render();
 			this._detailsView.$el.scrollTop(0);
 		},
 
+		/**
+		 * Replaces the current details view element with the details view
+		 * element of this file list.
+		 *
+		 * Each file list has its own DetailsView object, and each one has its
+		 * own root element, but there can be just one details view/sidebar
+		 * element in the document. This helper method replaces the current
+		 * details view/sidebar element in the document with the element from
+		 * the DetailsView object of this file list.
+		 */
+		_replaceDetailsViewElementIfNeeded: function() {
+			var $appSidebar = $('#app-sidebar');
+			if ($appSidebar.length === 0) {
+				this._detailsView.$el.insertAfter($('#app-content'));
+			} else if ($appSidebar[0] !== this._detailsView.el) {
+				// "replaceWith()" can not be used here, as it removes the old
+				// element instead of just detaching it.
+				this._detailsView.$el.insertBefore($appSidebar);
+				$appSidebar.detach();
+			}
+		},
+
 		/**
 		 * Event handler for when the window size changed
 		 */