user1611830
user1611830

Reputation: 4857

setting dashed inline style in erb file

How to set dashed inline css attributes inside an erb file. For instance, this

<%= image_tag "some_image.png", html: {width: "some_width", height: "some_height", margin:"some_margin"}%>

this works fine but when I set

<%= image_tag "some_image.png", html: {width: "some_width", height: "some_height", margin-left:"some_margin_left"}%>

I get

syntax error, unexpected tSTRING_BEG, expecting keyword_do or '{' or '('

Upvotes: 0

Views: 9331

Answers (2)

Ajay
Ajay

Reputation: 4251

In your inline way:

<%= image_tag "dtm_logo.png", 
   html: {width: "10px", height: "40px", :"margin-left" => "9px"} %> 

Separating your html and css to separate files :

<%= image_tag "your_image.png", id: 'image_id' %>

make sure 'your_image.png' file resides in your app/assets/images folder.

put this css code to your application.css. keeping css related attributes in your .html.erb template is not a clean approach.

#application.css

#image_id {
  margin: 20px;
  height: 10px;
  width: 30px; 
}

Upvotes: 0

Marek Lipka
Marek Lipka

Reputation: 51151

You have this error because symbol literal with dash (-, like :margin-left) is not valid symbol. It should be:

:"margin-left" => "some_margin_left"

also, this syntax should work:

margin: {left: "some_margin_left"}

Upvotes: 2

Related Questions