title: Get select to same width as a text box in bootstrap rails
body: <p>I have a form in rails (4.1.5) using bootstrap (3.3.2). The form has an input textbox and a select. I am using jquery to make the select to be the same width as the textbox. </p>
  
  <p>Here's the strange thing: the width of the select element is being changed by jquery, but it is reading the textbox width and setting the select's width as <strong>167</strong> pixels, whereas the text box in chrome is actually <strong>193</strong> pixels. </p>
  
  <p>Here is <code>_form.html.erb</code> :</p>
  
  <pre><code>&lt;head&gt;
    &lt;style&gt;
       .form-control {
          width: auto;
       }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;%= form_for foo do |f| %&gt;
      &lt;div class='form-group'&gt;&lt;%= f.text_field :name, placeholder: 'Name', id: 'foo-name-input', class: 'form-control' %&gt;&lt;/div&gt;
      &lt;div class='form-group'&gt;      
        &lt;%= f.collection_select(:foo_type, @foo_types.keys.to_a.map{|k|[k.humanize, k]}, :last, :first, {}, {class: 'form-control', id: 'foo-type-select'}) %&gt; 
      &lt;/div&gt;
      &lt;%= f.submit class: 'btn btn-default' %&gt;
    &lt;% end %&gt;
    &lt;br/&gt;
    &lt;div id='debug-dump'&gt;&lt;/div&gt;
    ...
    &lt;script&gt;
    $(function () 
    {
      // also tried $('#foo-name-input').show instead of document.ready below, which had the same effect
      $( document ).ready(function() {
        $('#debug-dump').text($('#foo-name-input').width());
        $('#foo-type-select').width($('#foo-name-input').width());
      });
    &lt;/script&gt;
  </code></pre>