user435245 user435245 - 1 year ago 64
CSS Question

Collapsible panel and dynamic positioning of dropdown menu

I'm developing a code which needs to dynamically position a drop down menu which is inserted under a collapsible panel. The problem is when the panel get collapsed you need to scroll vertically in order to come to the drop down, drop down get lost and opens outside of the windows. But when the collapsible is closed everything works fine. What is the JQuery positioning code which always accurately opens drop down under the button in different screen sizes and different scroll bar positions? here is the sample code I developed:,css,js,output

Answer Source

Hey the problem is you are not calculating the ScrollValue : i added "- $(document).scrollTop()" and everything works perfect

$(".dropdown").on('click', function() 
    $(this).find('.dropdown-menu').css('top',$(this).offset().top - $(document).scrollTop() + 30);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download