If a dropdown is opened further down the page on a mobile device, the content may not be fully visible or the dropdown content may “flip” upwards to find space. This affects the user experience.
You have already implemented a very elegant solution to this problem in the accordion element: When opening an accordion element, the page automatically scrolls up so that the top of the element is aligned with the top of the viewport.
I would suggest integrating a similar functionality for the dropdown element. Ideally, this function could be activated and deactivated in the element options, similar to how it is already possible with the accordion element.
For now I have it done with my own js, but it would be great if that will be available from cs itself.
window.addEventListener ('DOMContentLoaded',
function ()
{
if (window.matchMedia ('(max-width: 768px)').matches)
{
const trigger = document.getElementById ('dropdown_categories-anchor-toggle');
if (trigger)
{
trigger.addEventListener('click',
function ()
{
setTimeout (
function ()
{
const header = document.querySelector ('.x-header');
const headerHeight = header ? header.offsetHeight : 0;
const offsetTop = trigger.getBoundingClientRect().top + window.scrollY;
window.scrollTo ({top: offsetTop - headerHeight - 10,
behavior: 'smooth'});
}, 50);
});
}
}
});