1

I'm trying to prepend a $ in front of one of my fields and I was able to successfully do so, but without a custom label. This is the code that works:

= f.input :amount do
    $
    = f.input_field :amount, :label => false, :hint => false, :wrapper => false

This leads me to two confusing points. 1) Why does a label still appear when :label => false? and 2) why does this fail if I change it to:

= f.input :amount do
    $
    = f.input_field :amount, label: 'This is my label', :hint => false, :wrapper => false

When I change the label to my custom label the $ moves above the label instead of in front of the field. All help is appreciated, thanks.

apardes
  • 4,272
  • 7
  • 40
  • 66

1 Answers1

0

when you are doing

= f.input :amount do
  $
  = f.input_field :amount, label: 'This is my label', :hint => false, :wrapper => false

This generates html 

$
<label for="amount">This is my label</label>
<input id="amount" name=" " type="text" />

I'm not sure but i think simple_form is applying a css of display:block on your labels as from here labels are inline elements

I think all you need is some css magic to fix your issue

= f.input :amount do
  = f.input_field :amount, label: 'This is my label', :hint => false, :wrapper => false
  %span.dollar &#36;

and then on your input field use this css:

#input_id{
  //here your input_id would be something like resource_amount you can check it in developer console to be sure
  display:inline-block;
}

.dollar{
  float: left;
}

JSFiddle

Mandeep
  • 9,093
  • 2
  • 26
  • 36
  • Would that not simply display the $ in front of the label? That's not what I'm trying to do, I want the label to appear above the input field but I want the $ to appear directly in front of the field itself. – apardes Jun 26 '14 at 17:47
  • @haye321 you want $ to be in front of your input field? – Mandeep Jun 26 '14 at 17:49
  • Yes, and with the first snippet in my question I accomplish that. My question is why can I not ALSO include a custom label. It seems that I need to choose one or the other. – apardes Jun 26 '14 at 17:50
  • I tried adding a class to all fields this would apply to with `wrapper_html: { class: 'dollar_field' }` but it doesn't seem to be working. – apardes Jun 26 '14 at 18:27
  • wrapper_html would apply class to wrapper of input and label, it wont apply that class to input field – Mandeep Jun 26 '14 at 18:29
  • @haye321 if you'll inspect your element with firebug you'll see that your input will have a class of something like `resource_amount` so if your form is for person resource then that input will have an id `person_amount` – Mandeep Jun 26 '14 at 18:31
  • Thanks for that clarification, unfortunately I am back to the `$` displaying above the label again, not in front of the field. – apardes Jun 26 '14 at 18:33
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/56367/discussion-between-mandeep-and-haye321). – Mandeep Jun 26 '14 at 18:34