Jump to content

The ultimate community for Ruby on Rails developers.


Photo

How to style unseen form_for tags

css html form_for

  • Please log in to reply
1 reply to this topic

#1 DvDj

DvDj

    Signalman

  • Members
  • 20 posts
  • LocationUnited Kingdom

Posted 22 July 2014 - 11:48 AM

Hi,

 

So i am trying to style my 'new product' view by using css on the form tags, however because Rails packages these tags i'm struggling to understand how to find and manipulate them.

 

This is what my form_for code currently looks like: -

  <div class="fieldset">
 <legend class="legend">Image Info</legend>
    <%= f.label :image_url, :html => { :class => "label" } %>
    <%= f.text_field :image_url, :html => { :class => "input" } %>
    <%= f.label :artwork_template_url, :html => { :class => "label" } %>
    <%= f.text_field :artwork_template_url, :html => { :class => "input" } %>
 <br class="clear">
  </div>
<div class="actions">
    <%= f.submit %>
  </div>
<% end %>

And this is what the SCSS looks like: -

div {
  &.fieldset, &.actions {
    margin: 1em 0;
 padding: 1em;
 border:1px solid #cccccc;
 background: #f8f8f8;
 width:800px;
  }
  .legend {
 font-weight:bold;
 color:#000000;
  }
  .label {
 float:left;
 width:10em;
  }
  .input {
 width:200px;
  }
  .textarea {
 width:300px;
 height:100px;
  }
  .input:focus, .textarea:focus {
 background: #ffc;
  }
  .clear {
 clear:both;
  }
}

Normally i wouldn't set legend, label, input or textarea as a class but so far this is the only way i could get it to work.

 

1) I don't understand the use by Rails of the '&' at the beginning of the class names

2) I don't understand why my .input:focus, .textarea:focus does not work

 

Is there any web sites that you might recommend that shows how to incorporate css styling into these Rails items?

 

Many thanks

 

Stuart



#2 DvDj

DvDj

    Signalman

  • Members
  • 20 posts
  • LocationUnited Kingdom

Posted 23 July 2014 - 09:58 AM   Best Answer

Hi,

 

Just in case it helps anybody else in future, after playing about i have resolved the issue.

 

I was placing 

, :html => { :class => "label" } 

Within the Ruby embeded code itself which was allowing css styling to that element.  However i have since found out that putting a class in at the beginning for the whole form itself gave me normal access to every form element.

<%= form_for(@product, :html => { :class => "newProduct" }) do |f| %>

Happy Days!!


  • Jamie likes this





Also tagged with one or more of these keywords: css, html, form_for

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users