부트 스트랩 모달로 표시되는 선택한 플러그인이 잘 작동하지 않습니다.

Question

내 부트 스트랩 모달에 선택된 디스플레이를 사용하여 어떤 문제가 발생했는지, 누구도이 문제를 알고 있습니까? 여기

은 내가을 사용 선택 나는 CodeIgniter의 및 부트 스트랩 프레임 워크 **** 여기

<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

이것은 에 span7 클래스를 추가 한 이후 일 수 있습니다. CSS 충돌입니다.

width을 인라인 스타일으로 select에 적용 해보십시오. 내가 플러그인을 선택 사용하는 경우

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

, 나는 chzn-select로 클래스를 사용하지만 당신은 chzn_a을 사용했습니다.

예 : 이것을 확인하십시오. JSFiddle.

Answer 2

모달이 표시된 후 적용을 선택하십시오.

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

Answer 3

나는 문제가 입력 폭 가정이 CSS 그래서

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