Bootstrap-select: last option is hidden when live search is enabled and list exceeds height of window

[johnnysainz]

Able to reproduce in all browsers. When the live search box is added to the outerlist, the innerlist is pushed down and the last option is not accessible.

Adding the following to setSize() for the fix:
searchHeight = this.options.liveSearch ? 30 : 0
'max-height': menuHeight - headerHeight - searchHeight - actionsHeight - doneButtonHeight - menuPadding.vert - searchHeight + 'px',

[birjolaxew]

Cannot reproduce. Ubuntu 14.04, Chromium 53.0.2785.143.

[simonberger]

I have this issue since a long time as well. Tried updating the plugin to the newest version and was pretty optimistic that got fixed.
But for me it still looks same as for johnnysainz (it just appears under the select box).
Tested on chrome 55. Firefox is ok btw. It would be fixed if I lower the ul dropdown-menu innerby about 12px.

[caseyjhol]

Please provide a live example.

See guidelines for contributing.

Bug reports

A bug is a _demonstrable problem_ that is caused by the code in the repository.
Good bug reports are extremely helpful - thank you!

Guidelines for bug reports:

1. Use the GitHub issue search. Check if the issue has already been
   reported.

2. Check if the issue has been fixed. Try to reproduce it using the
   latest master or development branch in the repository.

3. Provide environment details. Provide your operating system, browser(s),
   jQuery version, Bootstrap version, and bootstrap-select version.

4. Create an isolated and reproducible test case. Create a reduced test
   case.

5. Include a live example. Use this Plunker debugging template to share your isolated test cases. You can also make use of jsFiddle or jsBin.

A good bug report shouldn't leave others needing to chase you up for more
information. Please try to be as detailed as possible in your report. What is
your environment? What steps will reproduce the issue? What browser(s) and OS
experience the problem? What would you expect to be the outcome? All these
details will help people to fix any potential bugs.

Example:

Short and descriptive example bug report title

A summary of the issue and the browser/OS environment in which it occurs. If
suitable, include the steps required to reproduce the bug.

1. This is the first step
2. This is the second step
3. Further steps, etc.

<url> - a link to the reduced test case

Any other information you want to share that is relevant to the issue being
reported. This might include the lines of code that you have identified as
causing the bug, and potential solutions (and your opinions on their
merits).

[simonberger]

I tried to create an example a week ago but wasn't able to build the html structure the bug appears on.
It really doesn't seem to be the clear problem I thought it is.
Also walking through all elements of my application where the bug exists and the bootstrap select element itself I can't find any attributes causing this.

If someone has more luck please create such an example. I'll try again if I have some time.

[simonberger]

Ok I got a new idea and here finally is a bug-example:

http://plnkr.co/edit/0K7uegP9puwrJ7ZM4Hs7

It turned out it is the css of a template system we use. It was enough to add this to the example.
I'm still not quiet sure which style exactly it is but I guess you can find this out fast.

[simonberger]

I had to find that out.
The issue comes from a height: 100% that is on .form-control. bootstrap itself does that only in some combinations.
It is a bit spooky. The following style fixes it in the demo.

span.form-control {
      height: 34px !important;
}

But I couldnt find the element where div, input and select have one that doesnt fix it.

EDIT:
The span thing comes from this I bet:

// create a span instead of input as creating an input element is slower
var input = document.createElement('span');

EDIT2:

The whole issue in chrome is fixed if you change it to input

// create a span instead of input as creating an input element is slower
var input = document.createElement('input');

[birjolaxew]

Link to offending code.

The function (liHeight) calculates various height values by inserting a mock menu in the DOM. This mock menu isn't a perfect duplicate of the actual menu (uses <span> instead of <input> for search, as pointed out by @simonberger), so any CSS that changes the height of specifically spans or inputs will break the height calculations.

JSFiddle

[simonberger]

Thanks for the additional information.
It seems to not just brake if there is special CSS for span. If you set height to 100% instead of 0px in your fiddle you have the same setup I have in real.
The result is the same error. But if the bootstrap-select calculation function uses an input tag instead of the span it most likely gonna work (assumed both use the 100% CSS height)

Update:
I now use the following temporary CSS fix for this. Maybe it helps others until this is fixed.
.bs-searchbox span.form-control { height: 34px; }

[cjkumaresh]

Adding the below css solved the issue
.dropdown-menu.open { max-height: none !important; }

[simonberger]

This lets the outer absolutely positioned container theoretically spread limitless.
If this would work all the expensive dimension calculation could be removed.

Did you test this suggestion?

[cjkumaresh]

@simonberger : I have tested this. You're right those calculation could be removed
JS Fiddle

[caseyjhol]

Setting max-height to none works if the select is the only thing on the page. Otherwise, the menu overflows the window, causing an additional unnecessary scrollbar to appear. All of the calculations are necessary. See https://jsfiddle.net/s279o0mp/2/. There's a slight performance hit using input over span, but it's pretty negligible, so I'll switch to that in the next version.

[caseyjhol]

v1.12.2 has officially been released.