Question

我的问题是在我的bootstrap模式上使用选择的显示有问题，有谁知道这是什么问题？

这是截图 enter image description here

****这是我的代码，我使用Codeigniter和Bootstrap框架****

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

以下是我选择的

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

Answer 1

在显示模态后应用选择。

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

Answer 2

这是CSS冲突，可能是在向您的span7添加课程select之后。

尝试将width作为内嵌样式应用于select。

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

当我使用Chosen插件时，我使用了chzn-select类，但您使用了chzn_a。

例如：检查此JSFiddle。

Answer 3

添加此css

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

在bootstrap模式中显示的选择插件不能正常工作

3 个答案: