選擇的插件在bootstrap模式下顯示效果不佳

我的問題是在我的引導模式中使用選擇的顯示器出現問題，任何人都知道這是什麼問題？選擇的插件在bootstrap模式下顯示效果不佳

這裏是截圖 enter image description here

****這裏是我的代碼，我用笨和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/

來源

2013-07-08 Oscar

所以我認爲問題是輸入寬度？嘗試使用Chrome Inspect Element或類似的工具來分析應用於輸入的CSS –

對不起，延遲迴復，即使我設置了寬度，它仍然是相同的 – Oscar

您是如何設置寬度的？我認爲有一些衝突的風格，這就是爲什麼使用像Chrome Inspect Element這樣的工具將有助於檢查實際上正在應用哪些樣式以及哪些樣式被覆蓋 –

這是一個CSS的衝突，可能是在將span7類添加到您的select之後。

嘗試應用width作爲內嵌樣式到select。

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

，當我用選的插件，我用類作爲chzn-select但你用過chzn_a。

例如：檢查此JSFiddle。

來源

2013-07-10 04:48:55 Praveen

抱歉，遲到的回覆，CSS真的衝突，現在它的工作對我來說，謝謝兄弟 – Oscar

@Oscar不客氣。高興地知道，你讓它工作:) – Praveen

應用顯示模態後選擇。

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

來源

2014-08-01 14:51:07

好的解決方案.. –

添加這個CSS

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

來源

2017-06-24 06:31:48 byteC0de

謝謝你的代碼片段，它可能會提供一些即時的幫助。通過展示*爲什麼*這是一個很好的解決方案，對未來的讀者會有更好的解決方案，這將爲它的教育價值提供一個合適的解釋[//大大提高]（// meta.stackexchange.com/q/114762）但不完全相同的問題。請編輯您的答案以添加解釋，並指出適用的限制和假設。 –

選擇的插件在bootstrap模式下顯示效果不佳

回答

相關問題