javascript - Extending bootstrap dropdown to bottom of visible page -


There is a dropdown on my website that I would like to extend to the visible bottom of my webpage. This is because I do not have to set a max-height on all the dropdowns, when actually the user can be pushed forward to choose their option to give more options. The 100% height will not work on it.

So, my HTML is very basic, it just hangs a bootstrap

   
ul> gt; ; & Lt; li role = "presentation" & gt; & nbsp; & lt; a class = "btn btn- default dropdownBtn" role = "MENUITEM" tabindex = "- 1" data-dam = "html: name" Gt; D & lt; / a & gt; & lt; / li & gt; li role = "Presentation" & gt; & nbsp; & lt; a class = "btn btn- default dropdownBtn" role = " MENUITEM "tabindex =" - 1 "Data-Bind =" HTML: Name "> Married gt; & lt; / li & gt; & lt; li role =" Presentation "& gt; Amp; nbsp; & lt; one class = "btn beet Dn-default dropdownBtn "role =" MENUITEM "tabindex =" -1 "data-dam =" html: name "& gt; singles & lt; / a & gt; & lt; / li & gt; & lt; li role = "Presentation" & gt; & amp; nbsp; & lt; a class = "btn btn- default dropdownBtn" role = "MENUITEM" tabindex = "- 1" Data-dam = "html: name" & gt; U & Lt; / a & gt; & lt; / Li & gt; & Lt; Li role = "presentation" & gt; & Amp; Nbsp; & Lt; A class = "BTN BTN-default dropdown BTN" roll = "menu" T. Abindex = "- 1" data-bind = "html: name" & gt; W & lt; / A & gt; & Lt; / Li & gt; & Lt; Li role = "presentation" & gt; & Nbsp; & Lt; A class = "btn btn-default dropdownBtn" role = "MENUITEM" tabindex = "-1" data-dam = "html: name" & gt; X & LT; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;

I have tried some things, but it seems that whatever I do is under the visual section of the page ... like 600px.

I tried

  var theDiv = $ ('. Dropdown-menu'); Var divTop = theDiv.offset (). Top; Var winhit = $ (window). height (); Var divHeight = winHyight - divTop; TheDiv.height (divHeight); Height (Tasks (index, height) {return window. Weirhit - $ (this)    

and

  $ ('.offset Some variations of (.) Top;});   

and

  $ ('dropdown scroll') height (function (index, height) {Var current_height = $ (this) .height (); var new_height = window.innerHeight - $ (this) .offset () top-parseint ($ (this) .css ('padding-top') - parsiat ( $ (This) .css ('padding-bottom'); if (new_height & gt; current_heit) returns new_heat;});   

Any help will be wonderful.

And one bay LA.

Again, I hang out at the end of the page.

The following element needs to be applied to the right element (I'm not sure that it is .dropdown-menu,):

  var theDiv = $ ('dropdown-menu'); Var winhite = $ (window) .height (); var divHeight = winHeight - $ ('# dropdownMenu1') offset () top - $ ('# dropdownMenu1'). OuterHeight () - 2; theDiv.css ('height ', DivHeight);   

The device is less than the height of the screen, its dropdown position is low in its height and -2 (there is a slight margin in the dropdown menu, which pushes down all the dropdowns)

Comments

Popular posts from this blog

java - ImportError: No module named py4j.java_gateway -

python - Receiving "KeyError" after decoding json result from url -

.net - Creating a new Queue Manager and Queue in Websphere MQ (using C#) -