Available items container gets incorrect height if the search box is disabled and the original list has a fixed height
Steps to reproduce
- Put a multi-select list on a page and assign it a height, say 100px. Also give a minimum width to all HTML input and select elements, say 300px.
- Apply the multi-select plugin to the list, keeping searchable turned off.
Expected result
The selected items and available items containers get a height of 100px each.
Actual result
The selected items container gets a height of 100px. However, the available items container height is lesser.
The reason, as I have been able to determine is that when searchable is false, the JavaScript hides the search box after the height has been calculated for the containers. Due to the min-height constraint on the select list, the header row for the available items container first gets drawn in 2 rows and then the search box gets hidden. Due to this, after the search box gets hidden, the available items container height gets reduced.
Essentially, the code is currently as follows:
// fix list height to match <option> depending on their individual header's heights
this.selectedList.height(Math.max(this.element.height()-this.selectedActions.height(),1));
this.availableList.height(Math.max(this.element.height()-this.availableActions.height(),1));
...
// set up livesearch
if (this.options.searchable) {
this._registerSearchEvents(this.availableContainer.find('input.search'));
} else {
$('.search').hide();
}
If the order is reversed, the problem disappears, that is, the code can be re-written as:
// set up livesearch
if (this.options.searchable) {
this._registerSearchEvents(this.availableContainer.find('input.search'));
} else {
$('.search').hide();
}
...
// fix list height to match <option> depending on their individual header's heights
this.selectedList.height(Math.max(this.element.height()-this.selectedActions.height(),1));
this.availableList.height(Math.max(this.element.height()-this.availableActions.height(),1));
This way, the search box will be hidden prior to the height calculation and therefore the height will be calculated correctly.