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.
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?
Based on your fiddle I noticed if I removed the disable search setting from initialising javascript then the problem goes away.
But this presents a new problem the search box is shown! So a little css can be used to hide the search box.
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; }
and use this:FIDDLE