CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3formstwitter-bootstrapsimple-form
jbearden
jbearden

Reputation: 1869

Rails 3: Changing input box length

Using Rails 3 with Twitter Bootstrap and Simple_form, I am having issues changing the length of the input box in this field:

<div class="input-prepend input-append">
   <%= f.input :price, :wrapper => :append do %>
      <span class="add-on">$</span>
      <%= f.input_field :price %>
      <span class="add-on">.00</span>
   <% end %>
</div>

Others say to add this after the :price variable:

:input_html => {:size => 15}

The 'do' loop seems to change the rules, any suggestions?

Upvotes: 0

Views: 3952

Answers (3)

Tom Wilson
Tom Wilson

Reputation: 837

I am using the f.input form to create controls with labels in a :class => 'form-horizontal' form, using a class attribute or style attribute (directly or as a hash, any way I tried) didn't work for me, and had zero effect on the generated HTML.

This is what worked for me:

<%= f.input :description, input_html: { class: 'span12' } %>

This works with both the Bootstrap column layout classes ('span1', 'span2', etc,) the input sizing classes ('input-large', 'input-xxlarge', etc,) or whatever custom class you want. The trick is using the input_html key. You can also mess with the label using the label_html key but that's likely to mess up the form-horizontal layout.

It looks like the size key in :input_html => {**:size** => 15} is ignored by SimpleForm... when I tired this it did not affect the HTML output.

I found this here in the SimpleForm docs: https://github.com/plataformatec/simple_form#usage

Upvotes: 0

Blake Taylor
Blake Taylor

Reputation: 9341

Twitter bootstrap has css classes for this. Depending on what size you want you can add class input-min, input-small, input-large and so on. You can also use the span classes, e.g. span1, span2, etc.

<div class="input-prepend input-append">
   <%= f.input :price, :wrapper => :append do %>
      <span class="add-on">$</span>
      <%= f.input_field :price, :class => 'input-medium' %>
      <span class="add-on">.00</span>
   <% end %>
</div>

Upvotes: 1

ronalchn
ronalchn

Reputation: 12335

try

:style => "width: 100px;"

Upvotes: 2

Related Questions