title: Bootstrap 3.2.0 Input Arrays inside Panel are not compatible with Firefox?
body: <p>I am developing a web application built off of Bootstrap 3.2.0.  Everything is working just fine except that all my <a href="https://stackoverflow.com/questions/3314567/how-to-get-form-input-array-into-php-array">input arrays</a> are not able to be edited within Firefox 33.1 (Safari 8.0 and Chrome 38.0.2125.122 work fine).</p>
  
  <p>My settings page is looks like this:</p>
  
  <pre><code>&lt;!-- Tab panes --&gt;
  
  &lt;form method="post" class="form-horizontal" role="form"&gt;
  
      ...
  
      &lt;div class="tab-content"&gt;
           &lt;div role="tabpanel" class="tab-pane" id="social"&gt;
  
              &lt;button type="button" class="social-add btn btn-success"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; Add Social Icon&lt;/button&gt;
              &lt;br/&gt;&lt;br/&gt;
  
              &lt;!-- Social Icons --&gt;
  
              &lt;div class="panel panel-default"&gt;
                  &lt;div class="panel-heading"&gt;
                      &lt;h3 class="panel-title"&gt;Social Icons&lt;/h3&gt;
                  &lt;/div&gt;
              &lt;div class="social-div panel-body"&gt;
  
                  // Loop ...
  
                  &lt;div class="social-divs form-group"&gt;
                          &lt;label class="col-sm-1"&gt;&lt;span class="glyphicon glyphicon-move pull-right"&gt;&lt;/span&gt;&lt;/label&gt;
                          &lt;div class="col-sm-11"&gt;
                              &lt;div class="col-sm-3"&gt;
                                  &lt;select name="social-type[]" class="form-control"&gt;
                                      // Loop ...
                                      &lt;option value="..."&gt;...&lt;/option&gt;
                                      // End Loop ...
                                   &lt;/select&gt;
                              &lt;/div&gt;
  
                              &lt;div class="col-sm-6"&gt;
                                  &lt;input name="social-link[]" class="form-control" type="text" value="..."&gt;
                              &lt;/div&gt;
  
                              &lt;div class="col-sm-3"&gt;
                                  &lt;button type="button" class="social-remove btn btn-danger"&gt;&lt;span class="glyphicon glyphicon-minus"&gt;&lt;/span&gt; Remove&lt;/button&gt;
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  // End Loop ...
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      ...
  
  &lt;/form&gt;
  </code></pre>
  
  <p>As you can see I am using the HTML input array method to get all social icons since the user dynamically creates them and can reorder them.  This all works perfect in Safari and Chrome as mentioned before, but the select box and textfield are not able to be edited in Firefox.</p>
  
  <p>The weird thing is that if I just had:</p>
  
  <pre><code>&lt;input name="social-link[]" class="form-control" type="text" value="..."&gt;
  </code></pre>
  
  <p>outside of a Bootstrap panel and tab system then the textfield is editable.  So there must be some compatibility issues with Firefox and Bootstrap Panels or Tabs.</p>
  
  <p>Thanks for your help in advance :)</p>