magreen03
magreen03

Reputation: 39

How to add a span next to a simple_form label

I'm trying to add a span that will contain a character counter next to a label. The label is generated using simple_form, I only seem to be able to put the span either above or below the field. The snippet code I tried is below:

<%= simple_form_for(@message, :html => {:class => 'form-vertical' }) do |f| %>
<div class="inputs">
<%= f.input :to_user_id, :required => true, :as=> :hidden %><span id="counter">160</span>
<%= f.input :content, :required => true, :input_html=> { :class=> "field-message span6", :placeholder=> "your message goes here, keep it short, 140 characters short..." } %>
</div>

Upvotes: 2

Views: 2524

Answers (1)

Carson Cole
Carson Cole

Reputation: 4461

The form builder will have the input fields self-contained, so one way is to have the div 'input' left-floated, and then have 'counter' left-floated right next to it.

styles.css

input { 
  clear: both;
  float: left; 
  width: 150px; 
}
#counter { float: left; width: 150px; }

form.html.erb

...
<%= f.input :to_user_id, :required => true, :as=> :hidden %>
<div id="counter">160</div>
<%= f.input :content, :required => true, ....

Upvotes: 2

Related Questions