Skip to content

[Bootstrap] Solution for keeping dropdowns inside the screen in mobile devices.

If you have any question about code, drop a comment

<div class="visible-xs" id="visible-xs"></div>
<script type="text/javascript">
if ($("#visible-xs").css("display") === "block") { 
	$('[data-toggle=dropdown]').click(function() {
                var menu = $(this).parent().find("ul:first");
                var menupos = $(this).offset();

            	if($(this).parent().hasClass("pull-right")){
                	menupos_right = $(window).width() - (menupos.left + $(this).outerWidth());
                    if (menupos_right + menu.width() > $(window).width()) {
                        var newpos = -(menupos_right + menu.width() - $(window).width());
                        menu.css({ right: newpos });    
                    }
                } else {
                     if (menupos.left + menu.width() > $(window).width()) {
                        var newpos = -(menupos.left + menu.width() - $(window).width());
                        menu.css({ left: newpos });    
                    }
          		}
	});
}	
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *