CODEWITHSUNDEEP
twitter-bootstrapjquery-chosen
Oscar
Oscar

Reputation: 1103

Chosen plugin displaying in bootstrap modal not working well

What my problem is using chosen display on my bootstrap modal got problem, anyone know what is this problem ?

here is the screenshot enter image description here

**** Here is my code, I using Codeigniter and Bootstrap framework ****

<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal hide fade" id="add_form">
    <div class="modal-header"  style="cursor:move">
        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
        <h3 id="myModalLabel" title="drag me around">Add Skill <i class="icon-move" style="margin-top:10px;"></i></h3>
    </div>
    <?php echo form_open('skill/add_skill'); ?>
    <div class="modal-body" style="min-height:400px;">
        <div class="form-horizontal">
            <div class="control-group">
                <div class="control">
                    <label for="control-label" class="control-label"></label>
                    <code>Note :</code> All field mark with <code>*</code> are required.
                </div>
            </div><!-- /control-group -->

            <div class="control-group template">
                <label for="input01" class="control-label">Tenant*:</label>
                <div class="controls">
                    <select name="tenant"  data-placeholder="Select Tenant" class="chzn_a span7 ">
                        <option value=""></option>
                        <?php if(isset($tenant_records)) : foreach($tenant_records as $row) : ?>
                        <option value="<?php echo $row->tenantid; ?>" data-id="<?php echo $row->tenantid; ?>"><?php echo $row->name; ?></option>
                        <?php endforeach; ?>
                        <?php endif; ?>
                    </select>
                </div>
            </div>

            <div class="control-group  template">
                <label for="input01" class="control-label">Skill*:</label>
                <div class="controls">
                    <input id="title" name="skill" size="30" type="text"    value="<?php echo set_value('skill'); ?>" placeholder="Skill"  title="Eg: Skill"  />
                </div>
            </div>

            <div class="control-group  template">
                <label for="input01" class="control-label">Description*:</label>
                <div class="controls">
                    <input id="title" name="description" size="30" type="text"    value="<?php echo set_value('description'); ?>" placeholder="Description"  title="Eg: Description"  />
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <input type="hidden" name="module_index" id="module_index" value="<?php echo site_url('skill/index/'); ?>" />
        <button data-dismiss="modal" class="btn">Close</button>
        <button class="btn btn-primary" type="submit">Save changes</button>
        </form>
    </div>
</div>

Here is the chosen I used

http://harvesthq.github.io/chosen/

Upvotes: 4

Views: 11893

Answers (3)

byteC0de
byteC0de

Reputation: 5273

Add this css

.chosen-container{
  width: 100% !important;
}

Upvotes: 2

Naitik Shah
Naitik Shah

Reputation: 513

Apply Chosen after the modal is shown. 

    $('#modal').on('shown.bs.modal', function () {
        $('.chzn-select', this).chosen();
    });

Upvotes: 9

Praveen
Praveen

Reputation: 56509

This is a CSS conflict, may be after adding class span7 to your select.

Try to apply width as an inline style to the select.

<select name="tenant" data-placeholder="Select Tenant" class="chzn_a span7" style="width: 200px;">

When I used Chosen plugin, I used class as chzn-select but you've used chzn_a.

For example: check this JSFiddle.

Upvotes: 2

Related Questions