下拉选择导致水平自动滚动

Question

I have a div and a table. Inside div there are dropdowns. div can be scrolled horizontally. I've used following tool for the dropdown.

Harvesthq Chosen

Now here is a piece of it.

In image 1 you can see I've taken the horizontal scroll to the end of it. Now I've selected a dropdown and look what happened.

Image 2 is the result. The horizontal bar came to the beginning of it. I don't want that. I want the bar to be placed exactly where it was before the selection. This horizontal bar is inside a div with width:200% and main body is width:100%

Code for one dropdown:

<select data-placeholder="" class="chzn_class eighty_percent" name="currency_id_1" id="currency_id_1">
    <option value=""></option>
    <option value="0">None</option>
</select>

Can anyone please tell me what is wrong? How can I fix this?

Fiddle

Exact problem

Answer 1

Based on your fiddle I noticed if I removed the disable search setting from initialising javascript then the problem goes away.

$('.chosen-select').chosen();

But this presents a new problem the search box is shown! So a little css can be used to hide the search box.

.chosen-search { display: none; }

I've never used harvesthq but I've guessed that the option hides the search feature when there are less that the given number (10 in your case).

So perhaps to replicate this feature you could not hardcode the above css but instead dynamically hide the search box using javascript. ie test number of option elements, then find the .chosen-search element and .hide() it.

So don't include the style .chosen-search { display: none; } .chosen-search { display: none; } and use this:

$('.chosen-select').chosen();

var disable_search_threshold = 10;
$('.chosen-select').each(function (index, element) {
    var $select = $(element);
    if ($select.find('option').length < disable_search_threshold) { 
        $select.next('div').find('.chosen-search').hide();
    }
});

FIDDLE

Answer 2

Just try adding overflow-y:hidden; property and make width:100%. If that doesn't work, try removing the width and height property and adding overflow:scroll; property to div.

If you provide jsfiddle reference, i can help better.