Merge pull request #9860 from Joe-mcgee/feature/overflow-popover-scro…

…lling [FIX] Popover divs don't scroll if they overflow the viewport
RocketChat · Mar 26, 2018 · 0ed0cfb · 0ed0cfb
2 parents 5cafdc0 + 8fdb4d2
commit 0ed0cfb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/packages/rocketchat-theme/client/imports/components/popover.css b/packages/rocketchat-theme/client/imports/components/popover.css
@@ -65,6 +65,13 @@
 		}
 	}
 
+		&__content-scroll {
+
+			.rc-popover__item {
+				display:block;
+			}
+	}
+
 	&__title {
 		flex: 1;
 

diff --git a/packages/rocketchat-ui/client/views/app/popover.js b/packages/rocketchat-ui/client/views/app/popover.js
@@ -84,6 +84,13 @@ Template.popover.onRendered(function() {
 			});
 		}
 
+		const realTop = Number(popoverContent.style.top.replace('px', ''));
+		if (realTop + popoverContent.offsetHeight > window.innerHeight) {
+			popoverContent.style.overflow = 'scroll';
+			popoverContent.style.bottom = 0;
+			popoverContent.className = 'rc-popover__content rc-popover__content-scroll';
+		}
+
 		if (activeElement) {
 			$(activeElement).addClass('active');
 		}