The FORM-CONTROL class in Bootstrap does not take effect when used in datatables

Question

Experts have a good bootstrap.

I am stuck in this problem and I cannot understand the root cause of the problem. This is the script. I use bootstrap3 and enable it with a datatable like the one below.

Now when I click on the “Edit” link, I am showing a modal form that looks like this. As you can see in modal form, SELECT OPTION is not displayed as an inline block, like the other two inputs.

When I debug using chrome, I found that the form control class accepts the width setting in auto, but should be set to display:inline-block. When I turn it off, I got the desired result.

SELECT OPTION DATATABLES. INPUTTEXT . CSS , . , SELECT OPTION , ADD NEW RECORD.

, ? .

:

<!--START EDIT MODAL WINDOW -->
<div class="col-lg-12">
   <?php $edit_id = 'edit' . $row -> ylid ?>
   <div class="modal fade" id="<?php echo $edit_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal_wrapper" >
        <div class="modal-dialog">
           <?php echo form_open('csettings/edit_yrlvl/'. $row -> ylid)?>
           <div class="modal-content">
           <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="H3">Update Grade/Year Level</h4>
           </div>
           <div class="modal-body"> 
              <div class="form-group">                                                      
                 <label>Subject Code</label>
                 <input value="<?php echo $row -> subjcode ?>" class="form-control" placeholder="Enter Subject Code" required="required" id="subjcode" name="subjcode" />
                 <input value="<?php echo $row -> subjcode ?>" type="hidden" id="hsubjcode" name="hsubjcode" />

                 <label>Description</label>
                 <input value="<?php echo $row -> subjdesc ?>" class="form-control" placeholder="Enter Subject Description" required="required" id="subjdesc" name="subjdesc" />
                 <input value="<?php echo $row -> subjdesc ?>" type="hidden" id="hsubjdesc" name="hsubjdesc" />

                 <label>Grade Level</label>
                 <select class="form-control">
                    <option>Select Grade Level</option>
                 </select>                  
                 </div>
               </div>
               <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                 <button type="submit" class="btn btn-primary">Update</button>
              </div>
           </div>
           </form>
        </div>
     </div>
  </div>
</div>
<!--END EDIT MODAL WINDOW -->    

Answer 1

, , , . , :

: Bootstrap v3.0 Datatables.

: SELECT MODAL DATATABLE, . .

: , DATABLE SELECT . , -. , SELECT DataTable , AUTO. datatable, - , , . SELECT.

: : custom.css, FORM-CONTROL.

.form-inline select.form-control{
   display: inline-block;
   width: 100%;
}

, , MODAL, . SELECT ​​ 100% auto.

DataTable. , , 100%. , , SELECT DATATABLE.

, PERMANENT , FORM-CONTROL, SELECT MODAL DataTable. CSS.

.select-option{
            display: inline-block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font size: 14px;
            line-height: 1.428571429;
            color:#555;
            vertical-align: middle;
            background-color:#fff;
            background-image:none;
            border: 1px solid #ccc;
            border-radius:4px;
            box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        }

SELECT FORM-CONTROL.

<select class="select-option" name="ylcode" id="ylcode">

, - , . SELECT DataTable , .

MODAL SELECT , 100%, .

, . .