Bootstrap dropdown clipped by overflow:hidden container, how to change the container?


Using bootstrap, I have a dropdown menu(s) inside a div with overflow:hidden, which is needed to be like this. This caused the dropdowns to be clipped by the container.

My question, how can I solve this clipping issue, e.g. change the container of all dropdowns inside my project to be body, with lowest cost possible?

this is an example of the code:


if anyone interested in a workaround for this, bootstrap dropdown has a event you may use to move the dropdown element outside the overflow:hidden container.

$('.dropdown').on('', function() {
    position: 'absolute',
    left: $('.dropdown').offset().left,
    top: $('.dropdown').offset().top

there is also a event if you prefer to move the element back to where it belongs once the dropdown is closed:

$('.dropdown').on('', function() {
    position: false,
    left: false,
    top: false

Here is a working example:

Answered By – Varol

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published