diff --git a/lib/core/viewer/components/viewer.component.html b/lib/core/viewer/components/viewer.component.html
index bcbce1f63c..01225e739c 100644
--- a/lib/core/viewer/components/viewer.component.html
+++ b/lib/core/viewer/components/viewer.component.html
@@ -134,7 +134,7 @@
         <div *ngIf="!isLoading" fxLayout="row" fxFlex="1 1 auto">
 
             <ng-container *ngIf="allowSidebar && showSidebar">
-                <div class="adf-viewer__sidebar adf-viewer__sidebar__{{sidebarPosition}}" fxFlexOrder="{{sidebarPosition === 'left'? 1 : 4 }}">
+                <div class="adf-viewer__sidebar" [ngClass]="getSideBarStyle()" fxFlexOrder="{{sidebarPosition === 'left'? 1 : 4 }}">
                     <ng-container *ngIf="sidebarTemplate">
                         <ng-container *ngTemplateOutlet="sidebarTemplate;context:sidebarTemplateContext"></ng-container>
                     </ng-container>
diff --git a/lib/core/viewer/components/viewer.component.ts b/lib/core/viewer/components/viewer.component.ts
index 08e389d5d5..4918b05ade 100644
--- a/lib/core/viewer/components/viewer.component.ts
+++ b/lib/core/viewer/components/viewer.component.ts
@@ -688,4 +688,9 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     private wait(ms: number): Promise<any> {
         return new Promise(resolve => setTimeout(resolve, ms));
     }
+
+    getSideBarStyle(): string {
+        return this.sidebarPosition === 'left' ? 'adf-viewer__sidebar__left' : 'adf-viewer__sidebar__right';
+    }
+
 }