CODEWITHSUNDEEP
jqueryjquery-chosen
Pierce McGeough
Pierce McGeough

Reputation: 3086

JQuery not displaying full width Chosen

I am using the jquery chosen select and have one set to hidden and if anothers value is selected then the hidden one is shown. It works but when the second chosen is shown it is not the full width it should be.

<div class="form-group">
    <label for="textfield1" class="col-xs-3 col-lg-2 control-label">Month: <span class="mandatory">*</span></label>
    <div class="col-sm-9 col-lg-4 controls">
        <select class="form-control input-sm chosen" tabindex="1" data-placeholder="Choose a date..." data-rule-required="true" name="" id="month-list">
            <option value=""></option>
            <option value="FIRST_DAY_RENTAL_PERIOD">First day of rental period</option>
            <option value="LAST_DAY_RENTAL_PERIOD" >Last day of rental period</option>
            <option value="FIRST_CAL_DAY" >First calendar day</option>
            <option value="FIRST_CAL_DAY_PRORATE_DAY" >First calendar day (pro-rate daily)</option>
            <option value="FIRST_CAL_DAY_PRORATE_WEEK" >First calendar day (pro-rate weekly)</option>
            <option value="DAY_OF_MONTH">Specified day of month</option>
        </select>
    </div>
</div>

<div class="month-days">
    <div class="form-group">
        <label for="textfield1" class="col-xs-3 col-lg-2 control-label">Day: <span class="mandatory">*</span></label>
        <div class="col-sm-9 col-lg-4 controls">
            <select class="form-control input-sm chosen" tabindex="1" data-placeholder="Choose a date..." data-rule-required="true" name="" id="">
                <option value=""></option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
            </select>
        </div>
    </div>
</div>

The jquery below works ok but once the chosen appears it looks like this. http://awesomescreenshot.com/01a1vuw8a1 It should show up the same width as the month above it

$('.month-days').hide();
$('#month-list').change(function(){
    if($("option:selected", this).val() == 'DAY_OF_MONTH'){
        $('.month-days').slideDown('fast');
    }else{
        $('.month-days').slideUp('fast');
    }
});

Upvotes: 0

Views: 11012

Answers (5)

Maitry Gohil
Maitry Gohil

Reputation: 101

Before hiding the second select element, call $('second-selector').chosen(); then hide the element.

Later when you show your element, the actual width will appear on the element.

Upvotes: 0

Tameshwar
Tameshwar

Reputation: 809

Try this...

$("selector").chosen({
   width: '100%'
});

Upvotes: 7

Waqas Javed
Waqas Javed

Reputation: 773

$('selector').chosen('destroy'); 
$("selector").chosen({ width: '100%' });

or 

$("selector").data("chosen").destroy().chosen();

Upvotes: 1

Paulo Costa
Paulo Costa

Reputation: 91

Change chosen.js

container_props = {
        'class': container_classes.join(' '),
        'style': "width: " + (this.container_width()) + ";",
        'title': this.form_field.title
};

to

container_props = {
        'class': container_classes.join(' '),
        'style': "width: 100%;",
        'title': this.form_field.title
};

works for me ;)

Upvotes: 9

Tomasz Rozmus
Tomasz Rozmus

Reputation: 1656

I had this problem some time ago, here is my proposal:

At first add #day-list id to second dropdown.

Add an event listener to first (#month-list) dropdown

$('select#month-list').on(
    'chosen:ready', 
    function() {//fires when first chosen dropdown is ready
        var mlCssWidth = $('select#month-list').closest('.chosen-container').css('width');
        //init second chosen after first one is ready
        $('select#day-list').chosen({/*other options*/, width: mlCssWidth});
    }
);

Then you can do something like this:

$('select#month-list').on(
    'chosen:updated', //or change?
    function() {
        var mlCssWidth = $('select#month-list').closest('.chosen-container').css('width');
        //correct second chosen width after first one is changed (and may have changed it's width if it was not hardocoded)
        $('select#day-list').closest('.chosen-container').css('width', mlCssWidth);
});

Of course you can cache jQuery objects/functions for simplification/performance.

PS: It would be simplier if you put it in jsfiddle ;-)

Upvotes: 1

Related Questions