Class FORM-CONTROL in Bootstrap dont take effect when used in datatables

Question

Good day Bootstrap experts.

I am stuck with this problem which I can't figure out the root cause of the issue. The scenario is this. I am using bootstrap3 and incorporate it with a datatable such as this one below.

Now, when I click the "edit" link, I show a modal form which is like this. As you can see on the modal form, the SELECT OPTION is not displayed as inline block like the other two inputs.

When I debug using chrome, I found out that the class form-control adopts a width sets to auto instead it must be set as display:inline-block. When I unclick this, I got the desired result.

I only got this problem with the SELECT OPTION when used in DATATABLES. But for INPUTTEXT, everything is ok. I tried also to disable the CSS of datatable, but still it doesn't work. I also noticed that SELECT OPTION is ok when used in the ADD NEW RECORD option.

Any idea experts, to solve this issue? Thank you so much in advance.

My Code:

<!--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

Sorry guys, I will close this post now as I found the answer by myself. Just to share to everyone, here is my findings:

Background: I am using a Bootstrap v3.0 and a Datatables.

Issue: When you add a SELECT tag in a MODAL inside a DATATABLE, the width of that object is set to auto. Take a look at this screenshot below.

Root cause: This issue is due to the fact that the DATABLE itself uses a SELECT tag in its view. Therefore, there is a conflicting use of the class form-control. As you see below, this SELECT tag inside a DataTable has a width set to AUTO. Since I am using a datatable, then anything pass to it inside this table will inherit whatever attributes set to the class. In this case, the SELECT tag.

Solution: This is my first solution: I create a custom.css where I override the value of this class FORM-CONTROL.

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

With this code which I override the class, I got the desired result for my MODAL such as this one. The width of the object SELECT tag is now set to 100% unlike before it is set to auto.

However, using the overriding method has an effect to the DataTable itself. As you can see below, the Label of the Navigation now is aligned below the options since it uses a width property of 100%. This is what I am saying that there is a conflicting property of the SELECT tag when used inside a DATATABLE.

So my PERMANENT solution with this issue, is to create a new class copying the whole property of the FORM-CONTROL class then assign it to the SELECT tag within the MODAL inside the DataTable. Declare this as INTERNAL type of CSS declaration..

.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;
        }

Now with this new class, I assigned this to the SELECT tag rather than using the FORM-CONTROL class.

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

So the result is now what I expected. The label on the SELECT tag in the DataTable is now aligned correctly as seen below.

And on the MODAL view, the SELECT tag has a width now set to 100% and it is correctly aligned with the other objects.

I hope I have shared a little bit knowledge to this community. Thank you so much.