1

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

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

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

AtanuCSE
  • 8,832
  • 14
  • 74
  • 112

2 Answers2

3

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; } 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

Chris Moutray
  • 18,029
  • 7
  • 45
  • 66
  • Ah! This is based on your original fiddle - Your **exactly problem** fiddle is different! – Chris Moutray Jan 15 '14 at 06:23
  • Thanks bro now I at least understand what's going on. But I can't just hide the search bar. If so then there wouldn't be any meaning of using it. This dropdowns can have hundreds of options. – AtanuCSE Jan 15 '14 at 06:25
  • @AtanuCSE - See fiddle and added javascript - it conditionally hides the search box based on what you set the value here to `var disable_search_threshold = 10;`. – Chris Moutray Jan 15 '14 at 06:28
  • My problem is the **Exact problem** fiddle. and first fiddle is the similar one I came accross during search – AtanuCSE Jan 15 '14 at 06:30
  • @AtanuCSE removing the `overflow-x: scroll;` and appling my js fixes the **Exact problem** fiddle. – Chris Moutray Jan 15 '14 at 06:44
  • Yes I know.I tried that. But bro your solution is taking off the **search functionality** which is the most important feature of this tool. I can't stop the search functionality. There will be hundreds of option in those dropdowns – AtanuCSE Jan 15 '14 at 06:51
  • @AtanuCSE please reread my answer - I've explained how to include the search and also fix the problem. Don't use the css `.chosen-search { display: none; }` but include the javascript. See this fiddle http://jsfiddle.net/Cq8Nd/ Have I missed something here? – Chris Moutray Jan 15 '14 at 06:59
  • Bro your last fiddle from comment still contains the problem. take the horizontal bar of the fiddle to the end. select any option and look the horizontal bar is again in the first position. Problem is same. – AtanuCSE Jan 15 '14 at 07:03
  • @AtanuCSE ah I see now so this does fix the issue with showing the dropdown but the problem is seen again when you actually select something! – Chris Moutray Jan 15 '14 at 07:09
  • @AtanuCSE I really don't think there is a quick work around for this without changing the code within the harvethq code. – Chris Moutray Jan 15 '14 at 07:11
  • @AtanuCSE perhaps you could handle the click/select event of the dropdown item and then scroll the dropdown back into view (dirty!) – Chris Moutray Jan 15 '14 at 07:12
  • Yeah may be I will need some thing like that. Thank you so much for your effort bro. Now at least I know what's the actual problem. – AtanuCSE Jan 15 '14 at 07:16
0

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.

gokul
  • 383
  • 1
  • 8
  • The table is huge with 14 column so can't reduce width. It has to be big enough to hold the entire table. overflow-y:hidden is already there. There is no height property. I can't change the basic shape. I need to stop the refresh of dropdown elements. – AtanuCSE Jan 15 '14 at 05:27