Reputation: 4857
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
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
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