I have a clickable div but instead of using the full address for the link, I'd like to use ruby's 'link_to' syntax. How would I point to "facebook_path" instead of the full address?
<div id="item_1", onclick="location.href='http://www.facebook.com';" style="cursor:pointer;"> Home </div>
You can do that using the following syntax:
<%= link_to "http://www.facebook.com", id:"item_1" do %>
#your code here
<% end %>
I hope this is what you were looking for
I'll assume you are just using erb, but you can pass a block to the link_to helper. So your example would be:
<%= link_to 'http://www.facebook.com' do %>
<div id="item_1" style="cursor:pointer;">
Home
</div>
<% end %>
In light of your comments, let me explain the difference between css and rails (which is what your issue is):
You can create an a block by using the following code:
<%= link_to your_path_helper, class: "class", id: "id" do %>
Stuff here
<% end %>
This will render the following HTML:
Stuff here
The question you have now is "how do I make this style the same as another element (div or similar)". The way to do this is to use css:
#app/assets/stylesheets.css
a.id {
color: #000; /* makes the link color black */
text-decoration: none; /* Removed underline */
}
CSS works by styling the different elements of your page. The class and id selectors allows you to identify the specific items, whilst the css properties help you pick the right styling
Your issue is you're trying to style your a element in the same way as your div. You need to select the a element & style that in your CSS
Related
I am attempting to create an application.html.erb file that holds a background that will be displayed on all of my pages.
Using the w3school's guide, I put the filename of the background (which is in the same folder as application.html.erb) in the body tag and it does not change anything.
<body background='bk.jpg'>
The content goes here
</body>
Any help solving this issue would be greatly appreciated.
For a Rails project, the best approach is to use image_path.
In your case, something like the following should work:
<%= image_path 'path_to_your_image/bk.jpg' %>
However, the correct way to do this is to store the image in the projects app/assets/images folder, and the asset path will look for this there. Then, you just need to update the helper to:
<%= image_path 'bk.jpg' %>
So:
<body background=<%= image_path 'bk.jpg' %>>
# Might need quotes around this: <%= image_path 'bk.jpg' %>, haven't been able to test
Or, better:
<%= content_tag :body, style: { background: image_path('bk.jpg') } do %>
Your content
<% end %>
Better still would be to have the css background set in the CSS rather than inline, though that's perhaps another question.
I'm new to Ruby on Rails and I'm trying to extract information I have from certain fields in a database and use them as means of styling.
For example, I have a height and width field in my 'Student' database. I wish to extract the height field content and width field content as parameters for my CSS file to set the height and width respectively of a div tag.
I am having a lot of trouble doing this. I have linked my stylesheet in the view index.html.erb by:
<%= stylesheet_link_tag 'students' %>
which is under assets/stylesheets/students.scss
I am not sure how to proceed.
If the styling is database driven, you should not rely on sprockets which generates static stylesheets during deployment.
A simple solution is to build css content using ERB.
<style>
.students-container {
height: "<%= #height.to_i %>px",
width: "<%= #width.to_i %>px"
}
</style>
You can extract out the style node into a partial and reuse it in multiple templates.
Seems like an inline style would work fine here. In your ERB, in your student divs, just do:
<% #students.each do |student| %>
<div style="height: <%= student.height %>px; width: <%= student.width %>px;">
<!-- other student stuff -->
</div>
<% end %>
It's either this or generating a unique CSS class for every student first, then using it in each div.
I'm working on a header partial for a Ruby on Rails app and for some reason the attributes I'm passing through to the class of an element isn't going through. As of right now the partial looks like this
<header class="admin-nav-header">
<%= link_to spree.admin_path, class: 'brand-link' do %>
<%= logo img_options: {class: 'img-responsive2', width: '170', position: 'absolute', top: '10px'} %>
<% end %>
</header>
The logo is showing up and resized down to the size needed, but it's not positioning where I want it. No matter what I come up with it stays in the same place. I tried adding a display attribute of both block and inline, I tried using a position attribute of relative. I looked at the space in the inspection tool in chrome and there's plenty room in the containing element for it to fit. Why won't it move to where I need it?
the issue is with position and top attributes. They are not HTML attribute but a CSS Property. So they need to be passed to style attribute.
You could try following code
<header class="admin-nav-header">
<%= link_to spree.admin_path, class: 'brand-link' do %>
<%= logo img_options: {class: 'img-responsive2', width: '170', style: 'position: absolute; top: 10px;'} %>
<% end %>
</header>
Using Refinery CMS to create product pages in our prototype. An admin can add a link to the main product page, and it will display similar to
Product Links
www.example.com/product/1
www.example.com/product/2
here is a screenshot of how it currently is being displayed
However, there will not always be a case when the ink is added. And this looks weird to have that field but no links in there because every element has margin-bottom:30px;
So my question is how do I make the element not show up at all if nothing is passed to it. Here is the code for the element:
HTML
<div class="contentPageElement">
<h3>Product Links</h3>
<%= link_to #discussion.link.to_s, #discussion.link %>
</div>
you can either put it in helper,or do something like this.
<% unless #discussion.link.empty? %>
<div class="contentPageElement">
<h3>Product Links</h3>
<%= link_to #discussion.link.to_s, #discussion.link %>
</div>
<% end %>
I think this is what you're looking for: http://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to_unless
Is there a way to add styling to rails form_for and make it display inline?
There might be a cleaner way to do this, but it works. (I tried with another nested hash, no dice)
<% form_for(#model, :html => { :style => 'background-color:red;' }) do |f| %>
A even cleaner way would be to define the styling in an external stylesheet (like application.css). form_for creates a <form id="something"/> tag with an id attribute. You can of course use this id in your stylesheet(s) to apply some specific styling to the form.
Put it in a div of the appropriate class? Its a display thing, not a rails thing.
application.css:
.inline form { display: inline; }
form.html.erb
<div class="inline">
<%= form....
</div>