diff --git a/NEWS b/NEWS
index f765d5eca..ed9dea992 100644
--- a/NEWS
+++ b/NEWS
@@ -45,6 +45,7 @@ Bug fixes
  - [web] fixed advanced mailbox search when mailbox name is very long
  - [web] fixed handling of public access rights of Calendars (#4344)
  - [web] fixed server-side CSS sanitization of messages (#4366)
+ - [web] cards list not accessible when changing address book in expanded card view
  - [eas] hebrew folders encoding problem using EAS (#4240)
  - [eas] avoid sync requests for shared folders every second (#4275)
 
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 41fcff933..58edda349 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -234,7 +234,7 @@
 
     <div layout="row" class="md-flex">
 
-      <div class="view-list" layout="column" ng-class="{'view-list--close': centerIsClose}">
+      <div class="view-list" layout="column" ng-class="{'view-list--close': addressbook.centerIsClose(centerIsClose)}">
 
         <!-- single-selection toolbar -->
         <md-toolbar class="md-accent md-hue-1"
@@ -516,7 +516,7 @@
       <md-fab-speed-dial
           class="md-scale sg-fab-bottom-center"
           ng-cloak="ng-cloak"
-          ng-class="{ 'sg-sidenav-close': leftIsClose, 'sg-center-close': centerIsClose }"
+          ng-class="{ 'sg-sidenav-close': leftIsClose, 'sg-center-close': addressbook.centerIsClose(centerIsClose) }"
           md-direction="up"
           ng-show="addressbook.selectedFolder.isOwned || addressbook.selectedFolder.acls.objectCreator">
         <md-fab-trigger>
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 2fac4cde6..ebd03dc96 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -327,7 +327,7 @@
       class="md-scale sg-fab-bottom-center"
       ng-if="::!mailbox.composeWindowEnabled()"
       ng-cloak="ng-cloak"
-      ng-class="{ 'sg-sidenav-close': leftIsClose, 'sg-center-close': centerIsClose }"
+      ng-class="{ 'sg-sidenav-close': leftIsClose, 'sg-center-close': mailbox.centerIsClose(centerIsClose) }"
       md-direction="up">
     <md-fab-trigger>
       <md-button class="md-fab md-accent" label:aria-label="Write a new message">
@@ -352,7 +352,7 @@
       class="md-fab md-accent sg-fab-bottom-center"
       var:aria-label="Write a new message"
       ng-if="::mailbox.composeWindowEnabled()"
-      ng-class="{ 'sg-sidenav-close': leftIsClose, 'sg-center-close': centerIsClose }"
+      ng-class="{ 'sg-sidenav-close': leftIsClose, 'sg-center-close': mailbox.centerIsClose(centerIsClose) }"
       ng-click="mailbox.newMessage($event)">
     <md-tooltip md-direction="left"><var:string label:value="Write a new message"/></md-tooltip>
     <md-icon>edit</md-icon>
diff --git a/UI/WebServerResources/js/Contacts/AddressBookController.js b/UI/WebServerResources/js/Contacts/AddressBookController.js
index 732f7785f..b12a91a22 100644
--- a/UI/WebServerResources/js/Contacts/AddressBookController.js
+++ b/UI/WebServerResources/js/Contacts/AddressBookController.js
@@ -89,6 +89,11 @@
       });
     }
 
+    this.centerIsClose = function(navController_centerIsClose) {
+      // Allow the cards list to be hidden only if a card is selected
+      return this.selectedFolder.hasSelectedCard() && !!navController_centerIsClose;
+    };
+
     this.selectCard = function(card) {
       $state.go('app.addressbook.card.view', {cardId: card.id});
     };