Hello,
What is the fix for the modal on the team page not scrolling.
One can't really force the length of the profile of team members supplies so this is an issue. Once the modal content is longer than the viewport there is (1) no way to scroll down to see the rest of its content. (2) There is also no way to close the modal.
Please advise.
Also can one get the images to also have the hyperlink?
Hi Joshua,
Thanks for testing on both desktop and mobile, that helps a lot. We've set it up the way you suggested: on desktop only the profile text scrolls, and on mobile the whole popup scrolls while the close button stays pinned at the top.
1. Scrolling fix
Go to Template → Template Options → Custom Code → Custom CSS. Remove the CSS from my previous reply and replace it with this:
/* All screens: lock the page behind the popup and keep it above the header */
html:has(.artolio-teams .sppb-dynamic-content-collection__item.active) {
overflow: hidden;
}
.sppb-section:has(.artolio-teams .sppb-dynamic-content-collection__item.active) {
z-index: 10000 !important;
}
/* Desktop & tablet: only the profile text scrolls */
@media (min-width: 768px) {
.artolio-teams .sppb-dynamic-content-collection__item .artolio-team-popup {
max-height: 90vh;
max-width: calc(100vw - 30px);
overflow-y: auto !important;
}
.artolio-team-popup .sppb-dynamic-content__is-rich-text:not(.team-popup-social *) {
max-height: 40vh;
overflow-y: auto;
overscroll-behavior: contain;
}
}
/* Mobile: the whole popup scrolls, close button stays visible */
@media (max-width: 767px) {
.artolio-teams .sppb-dynamic-content-collection__item .artolio-team-popup,
.artolio-teams .sppb-dynamic-content-collection__item.active .artolio-team-popup {
top: 20px;
left: 15px;
right: 15px;
width: auto;
max-width: 530px;
margin-inline: auto;
max-height: calc(100dvh - 40px);
overflow-y: auto !important;
overscroll-behavior: contain;
transform: none;
}
.artolio-teams .sppb-dynamic-content-collection__item .team-popup-close {
position: fixed;
top: 35px;
right: max(30px, calc((100vw - 530px) / 2 + 15px));
z-index: 2;
background: var(--sppb-card-bg-secondary);
}
.artolio-team-popup .sppb-dynamic-content__is-rich-text {
max-height: none;
overflow: visible;
}
}2. Opening the popup by clicking the image
Go to Template → Template Options → Custom Code → Custom Javascript and add:
document.addEventListener('click', function (e) {
var img = e.target.closest('.artolio-teams .sppb-dynamic-content-collection__item > .addon-root-dynamic-content-image');
if (!img) return;
var toggle = img.parentElement.querySelector('.team-popup-toggle');
if (toggle) { e.preventDefault(); toggle.click(); }
});Then add this line to your Custom CSS to show a hand cursor on the images:
.artolio-teams .sppb-dynamic-content-collection__item > .addon-root-dynamic-content-image { cursor: pointer; }Save, clear your Joomla cache and browser cache, and check the team page again. Clicking a team member's image now opens the same popup as the + icon.
If anything still looks off, please share the page URL and we'll take a look.
Best regards,
Hello there!
Thanks for reporting this. Please add the CSS below in Template → Template Options → Custom Code → Custom CSS, save, and clear your browser cache:
.artolio-teams .sppb-dynamic-content-collection__item .artolio-team-popup {
max-height: 90vh;
max-width: calc(100vw - 30px);
overflow: hidden;
}
.artolio-team-popup .sppb-dynamic-content__is-rich-text:not(.team-popup-social *) {
max-height: 40vh;
overflow-y: auto;
overscroll-behavior: contain;
}
html:has(.artolio-teams .sppb-dynamic-content-collection__item.active) {
overflow: hidden;
}
.sppb-section:has(.artolio-teams .sppb-dynamic-content-collection__item.active) {
z-index: 10000 !important;
}After this, long profile text scrolls inside the popup, the page behind it stays still, and the close button stays visible above the header on any screen size. We've also passed this to our developers so it can be fixed in a future update.
About the image link: should clicking the image open the same popup, or go to a separate page?
Best regards,
Ok. The code kinda worked.
So I have the headshot, Name and Designation taking up 3/4 of the view with 1/4 left for the profile details.
1/4 of the screen is too small to take up the scroll and its really not even scrolling to the bottom.
Why not let the whole modal content scroll (apart from the close button).
===
As regards the link (ideally it should open the modal, same as the + icon)
Ok... So after a bit of testing for both desktop and mobile, scrolling the rich-text seem to be a better UX.
What needs to be done is to just ensure the modal shows correctly on mobile. Or better still scroll rich-text on desktop but scroll all modal content on mobile.
PS: I have my images set as 1:1