twitter-bootstrap 选择的插件在引导模式中显示效果不佳
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17519512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chosen plugin displaying in bootstrap modal not working well
提问by Oscar
What my problem is using chosen display on my bootstrap modal got problem, anyone know what is this problem ?
我的问题是在我的引导模式上使用选择的显示有问题，有人知道这是什么问题吗？
here is the screenshot
这是屏幕截图
**** Here is my code, I using Codeigniter and Bootstrap framework ****
**** 这是我的代码，我使用 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>
Here is the chosen I used
这是我使用的选择
采纳答案by Praveen
This is a CSSconflict, may be after adding class span7to your select.
这是一个CSS冲突，可能是在向span7您的select.
Try to apply widthas an inline styleto the select.
尝试width作为内联样式应用于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-selectbut you've used chzn_a.
当我使用 Chosen 插件时，我使用了 class aschzn-select但你使用了chzn_a.
For example:check this JSFiddle.
例如：检查这个JSFiddle。
回答by Naitik Shah
Apply Chosen after the modal is shown.
显示模态后应用选择。
$('#modal').on('shown.bs.modal', function () {
$('.chzn-select', this).chosen();
});
回答by byteC0de
Add this css
添加这个css
.chosen-container{
width: 100% !important;
}
