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


using bootstrap, have dropdown menu(s) inside div overflow:hidden, needed this. caused dropdowns clipped container.

my question, how can solve clipping issue, e.g. change container of dropdowns inside project body, lowest cost possible?

this example of code: http://jsfiddle.net/0y3rk8xz/

if interested in workaround this, bootstrap dropdown has show.bs.dropdown event may use move dropdown element outside overflow:hidden container. may capture position of dropdown container somehow , absolutely position based on them.

$('.dropdown').on('show.bs.dropdown', function() {   $('body').append($('.dropdown').css({     position: 'absolute',     left: $('.dropdown').offset().left,     top: $('.dropdown').offset().top   }).detach()); }); 

there hidden.bs.dropdown event if prefer move element belongs once dropdown closed:

$('.dropdown').on('hidden.bs.dropdown', function() {   $('.bs-example').append($('.dropdown').css({     position: false,     left: false,     top: false   }).detach()); }); 

here working example:

http://jsfiddle.net/qozt42oo/32/


Comments

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -