4

我的问题是在我的引导模式上使用选择的显示有问题，有人知道这是什么问题吗？

这是屏幕截图 在此处输入图像描述

**** 这是我的代码，我使用 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/

4

3 回答 3

7

显示模态后应用选择。

    $('#modal').on('shown.bs.modal', function () {
        $('.chzn-select', this).chosen();
    });
于 2014-08-01T14:51:07.870 回答
2

这是一个CSS冲突，可能是在将类添加span7到您的select.

尝试将width其作为内联样式应用于select.

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

当我使用 Chosen 插件时，我使用了 class aschzn-select但你使用了chzn_a.

例如：检查这个JSFiddle。

于 2013-07-10T04:48:55.157 回答
2

添加这个CSS

.chosen-container{
  width: 100% !important;
}
于 2017-06-24T06:31:48.877 回答