CSS / jQuery: limit dropdown max-height to screen height -
i have html page needs show lot of content in dropdowns in navbar on top leads of dropdowns exceed screen height when opening them. use bootstrap 3 , have own dropdowns created using unordered list (<ul>
) tags.
if apply following css resolves issue , gets me vertical scrollbar want in case. problem here max-height fixed value. note: need able support ie8 , ie9.
is there way use css or jquery set screen height (or bit less) max-height adjusts if screen height changes, esp. support smaller screens ?
my css:
<ul class="dropdown-menu" style="max-height:300px; overflow:auto">
many this, tim.
this set list's height not overflow screen.
try this:
$(function(){ $(window).resize(function(){ $('ul').css('max-height', ($(window).height() - $('ul').offset().top) + 'px'); }); });
Comments
Post a Comment