CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3twitter-bootstrapbest-in-place
groffcole
groffcole

Reputation: 881

Rails best_in_place gem input has nasty extra space

I'm using Rails 3.2.3, Twitter Bootstrap, and the best_in_place gem to handle in-place editing.

The problem is that whenever I click to edit input, a bunch of extra space is placed to the right of the input.

Before: Before

After: After

Has anyone else had this problem? What should I do?

I've tried explicitly setting the padding and margin to 0 and the width to a set pixel width - less than the td width.

Thanks.

Upvotes: 2

Views: 1576

Answers (4)

snowangel
snowangel

Reputation: 3462

I used cols and rows, as an alternative to size: 

<%= best_in_place @payment, :currency, :html_attrs =>  { :cols => '45', :rows => '10' } %>

Upvotes: 0

Joel White
Joel White

Reputation: 33

I recently ran into this issue myself. I passed the html attribute size using the :html_attrs option available in best_in_place, as follows:

<%= best_in_place @payment, :currency, :html_attrs => { size: 3 } %>

A size of 3 means an input box for 3 characters. This substantially reduced the input box expansion in my example.

Upvotes: 2

Zahiduzzaman
Zahiduzzaman

Reputation: 197

Twitter bootstrap gives you wide range of input sizing classes. like 'input-small', 'input-large' etc.

try adding those classes for 'inner_class' attribute and it should apply on the input field.

<%= best_in_place @category, :name, {:inner_class => "input-small", :type => :input} %>

hope this helps :)

Upvotes: 4

Ryan Bigg
Ryan Bigg

Reputation: 107728

I doubt that this is actually adding data to your database with extra spaces.

This is just a CSS issue, where your input field is designed to take up a certain percentage of the containing element or something like that. Hard to tell without seeing the exact CSS behind the input field.

Upvotes: 0

Related Questions