title: Datatables in Bootstrap modal width
body: <p>In my modal I am trying to put Datatables in there, the problem I'm having is that the width is incorrect, it should be the width of the modal but it is actually like this  </p>
  
  <p><a href="https://i.stack.imgur.com/bLvIJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bLvIJ.png" alt="enter image description here"></a></p>
  
  <p><strong>My jQuery calling the Datatables</strong></p>
  
  <pre><code>function getValidTags(){
        var ruleID = $('.ruleID').val();
  
        var table = $('.valid-tags').DataTable({
        "ajax": {
            "url": "/ajax/getValidTags.php",
            "type": "POST",
            "data": {
              ruleID: ruleID
            },
        },
        "columnDefs": [{
           "targets": 2,
           "render": function(data, type, full, meta){
              return '&lt;button class="btn btn-default btn-sm" type="button"&gt;Manage&lt;/button&gt; &lt;button class="btn btn-danger btn-sm"&gt;Delete&lt;/button&gt;';
           }
        }]        
    });   
  }
  </code></pre>
  
  <p><strong>My HTML</strong></p>
  
  <pre><code>&lt;!-- Modal where you will be able to add new rule --&gt;
  &lt;div class="modal fade validation-list-modal" tabindex="-1" role="dialog" aria-labelledby="LargeModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static"&gt;
  
      &lt;div class="modal-dialog modal-wide"&gt;
  
          &lt;div class="modal-content"&gt;
  
              &lt;div class="modal-header modal-header-custom"&gt;
              &lt;input class="ruleID" type="hidden"&gt;&lt;/input&gt;     
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;x&lt;/button&gt;
                  &lt;h4 class="modal-title modal-title-main"&gt;Create New Rule&lt;/h4&gt;
              &lt;/div&gt;
  
              &lt;div class="modal-body"&gt;
              &lt;div class="topBar"&gt;                       
                  &lt;div&gt;
                      &lt;input type="text" class="validTags inputTextStyling"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
                  &lt;table class="table table-striped table-condensed valid-tags"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Tag Name&lt;/th&gt;
                              &lt;th&gt;Autofixes&lt;/th&gt;
                              &lt;th&gt;Manage&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody class="validTagsTable"&gt;
                      &lt;/tbody&gt;                    
                  &lt;/table&gt;                           
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
  
                  &lt;button type="button" class="btn btn-primary" id="saveValidTags"&gt;Save&lt;/button&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>