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:
Comments
Post a Comment