multiselect icon indicating copy to clipboard operation
multiselect copied to clipboard

Available items container gets incorrect height if the search box is disabled and the original list has a fixed height

Open manish-in-java opened this issue 13 years ago • 0 comments

Steps to reproduce

  1. 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.
  2. 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.

manish-in-java avatar Jun 15 '12 08:06 manish-in-java