Version 0.9.14 breaks with ActiveAdmin

[nicosantangelo]

I'm using chosen-rails to show the options in the filers I define with active admin (witch is in version 0.6.0 according to my Gemfile.lock).
Updating chosen-rails from 0.9.13 ~> 0.9.14 causes chosen to keep the options visible at all times.

In more detail, it doesn't apply the left position style to "chzn-drop"

Instead of seeing

<div class="chzn-drop" style="left: -9000px;">
<!-- and, on click -->
<div class="chzn-drop" style="left: 0px;">

It stays like this:

<div class="chzn-drop">

Downgrading back to .13 fixed the issue for me.

[tsechingho]

If you look up 720c86b, you will see Chosen change it's container html and use js to add/remove tag class chzn-with-drop of container.

In my local box, I don't have your situation without ActiveAdmin. Maybe you can check if chzn-with-drop exists?

[nicosantangelo]

I didn't see that commit, I was checking against a working version to see what changed, my bad.

Having that in mind I looked at the code and the implementation was adding the chosen.css file with @import chosen in active_admin.css.scss so I deleted that and added the *= require chosen but it didn't fix yet (but at least now it's added properly).

The chzn-with-drop class is setted correctly

<div id="q_user_id_chzn" class="chzn-container chzn-container-multi chzn-with-drop chzn-container-active" style="width: 240px;" title="">
    <ul class="chzn-choices">
    ....

Do you know if some online demo is already using this version? (so I can see a working version and really check if it is activeadmin what causes the problem)

[wdiechmann]

hmmm - I experience somewhat the same!

In production:

in development:

any leads?

[wdiechmann]

I should add that I'm on chosen-rails 0.9.15 (bundle updated today) and running Ruby 1.9.3 with Rails 3.2.8 on top

[tsechingho]

@wdiechmann Do you add width option in javascript, as discussed in #26 ?

[wdiechmann]

I use it just as prescribed :) Complete with

allow_single_deselect: true no_results_text: 'No results matched' width: '200px'

I can't be 100% sure - but I'am pretty sure this thing worked (in production too) back in 0.9.8'ish

ohh - and I use it with simple_form

• and I've checked the js console (no errors not even a missing resource or anything even close - what'a'you'know; gotta' get lucky once in a while ;) )

the resulting HTML looks like this:

<fieldset class="control-group select optional">
    <div class="controls">
        <label class="select optional " data-content="sprog" data-placement="top" for="employee_person_attributes_language_id" rel="popover">sprog</label>
        <select class="select optional chzn-select chzn-done" id="employee_person_attributes_language_id" name="employee[person_attributes][language_id]" style="display: none;">
            <option value="">vælg sproget</option>
            <option value="13">dansk</option>
            <option value="14">deutch</option>
            <option value="15">italiano</option>
        </select>
        <div id="employee_person_attributes_language_id_chzn" class="chzn-container chzn-container-single" style="width: 250px;" title="">
            <a href="javascript:void(0)" class="chzn-single" tabindex="-1">
                <span>vælg sproget</span>
                <div><b></b></div>
            </a>
            <div class="chzn-drop" style="left:-9000px;">
                <div class="chzn-search">
                    <input type="text" autocomplete="off">
                </div>
                <ul class="chzn-results">
                    <li id="employee_person_attributes_language_id_chzn_o_0" class="active-result result-selected" style="">vælg sproget</li>
                    <li id="employee_person_attributes_language_id_chzn_o_1" class="active-result" style="">dansk</li>
                    <li id="employee_person_attributes_language_id_chzn_o_2" class="active-result" style="">deutch</li>
                    <li id="employee_person_attributes_language_id_chzn_o_3" class="active-result" style="">italiano</li>
                </ul>
            </div>
        </div>
    </div>
</fieldset>

[wdiechmann]

not sure whether this is any help to you @nicosantangelo - but when I compared the resources between my development and production I discovered that the chosen.css did not get compiled into the resource!

So - I went hunting and discovered that my application.css had this:

 *= require_self
 *= require chosen

at the top - and about half-way through this:

/*
 * some comments and styles commented

*but no / at the end!

Lesson learned! Always keep comments in pairs!

Even if you're gonna comment the rest of the file