0

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.

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 167 pixels, whereas the text box in chrome is actually 193 pixels.

Here is _form.html.erb :

<head>
  <style>
     .form-control {
        width: auto;
     }
  </style>
</head>
<%= form_for foo do |f| %>
    <div class='form-group'><%= f.text_field :name, placeholder: 'Name', id: 'foo-name-input', class: 'form-control' %></div>
    <div class='form-group'>      
      <%= f.collection_select(:foo_type, @foo_types.keys.to_a.map{|k|[k.humanize, k]}, :last, :first, {}, {class: 'form-control', id: 'foo-type-select'}) %> 
    </div>
    <%= f.submit class: 'btn btn-default' %>
  <% end %>
  <br/>
  <div id='debug-dump'></div>
  ...
  <script>
  $(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());
    });
  </script>
amphetamachine
  • 27,620
  • 12
  • 60
  • 72
Anand
  • 3,690
  • 4
  • 33
  • 64

1 Answers1

0

The answer is based on Dan Short's answer in this thread - use outerWidth instead of width as follows to read the value, and use width to write it:

$('#foo-type-select').width($('#foo-name-input').outerWidth());
Community
  • 1
  • 1
Anand
  • 3,690
  • 4
  • 33
  • 64