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>
Related
I have the following in my html.erb file:
<%= image_tag "logo.jpg", :class => "img-responsive", :href =>"http://www.google.com" %>
However, this is not a clickable link. I assumed the :href = > would make it so. Does anyone have any ideas of making your rails image a clickable link? I tried the following logic which I found on another Stack Overflow Post:
<%= link_to image_tag("logo.jpg", :class => "img-responsive"), "http://wwww.google.com" %>
But this makes the image smaller and adds an odd half circle at the bottom of the image. I also cannot add :style or :class working properly.
Anyone have any ideas?
Not sure if this is the best way, but you could just wrap the image tag with regular anchor tags:
<a href="http://www.google.com">
<%= image_tag "logo.jpg", :class => "img-responsive" %>
</a>
The second way is technically the right way to do it, however since its giving you issues could always try this:
<%= link_to 'http://google.com' do %>
<%= image_tag 'logo.jpg', class: 'img-responsive' %>
<% end %>
As for the class/style not adding properly I've always done it as
class: 'this-is-a-class'
and
style: 'padding-left:30px;'
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 have root page with some pics and text, so that visitors could click either on pics or text and be forwarded to desired part of my app.
My basic html code
<div class="tprod">
<div class="titimg"><%= image_tag('atkr_1.jpg') %></div>
<div class="text">
<div class="antr">
<h2><%= I18n.t 'Waste_recycling_equipment'%></h2>
</div>
<%= I18n.t 'waste_intro_start' %>
</div>
<%= link_to (I18n.t 'read_more'),products_path(:category => #waste_root.name) %>
</div>
When I try to add link_to for image_tag, suddenly image changes position.
<div class="tprod">
<div class="titimg"> <%= link_to image_tag('energ_1.jpg') %> </div>
<div class="text">
<div class="antr">
<h2><%= I18n.t 'Energy_wood_machinery'%></h2>
</div>
<%= I18n.t 'energo_intro_start' %>
</div>
<%= link_to (I18n.t 'read_more'),products_path(:category => #energy_root.name) %>
</div>
Looks like this
I was wondering it is because now it is link element combined with image_tag so It has different CSS formatting?
Application is available here
It's working for me on Chrome:
Formatting
The likely issue you have is with your CSS, not Rails
After looking at your picture, I would say the issue is likely to be with your use of float: left;
float basically treats the element as an inline item, meaning if its width / structure is not consistent in even the smallest degree, it can cause issues like you're seeing.
To fix this, I would strongly recommend using the good old <table> tag. It might seem old skool, but it's certainly what you've got here:
<table class="items">
<tr>
<% #items.each do |item| %>
<td><%= image_tag item.image.url %></td>
<% end %>
</tr>
<tr>
<% #items.each do |item| %>
<td><%= item.description %></td>
<% end %>
</tr>
</table>
This might get frowned upon for the use of <table>, but I believe it will work for what you've got here.
It's because of your #content .mainprods .tprod a css affecting the anchor tag you're creating around the image.
You need to make the css more specific in order to only specify the anchor at the bottom. For example, if you added :class => "read-more" to the bottom link_to, then you could change the css selector to #content .mainprods .tprod a.read-more and only style the bottom link. There's a number of different approaches for that.
Also, as an aside, (I18n.t 'read_more') is bad practice.. It should be I18n.t('read_more') ;)
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
I'm using Rails 4, and Bootstrap 3. In my application.html.erb I have to keep the content on my home page in a container, but if I move my end </div> above the <%= yield %> then I can keep the content outside of it full width and not in the Bootstrap container. In order to have specific full width items on all of my pages, do I have to put a <div class="container"> in every view of my rails app? Or, is there a better way?
<%= render 'layouts/header' %>
<div class="container">
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>"><%= value %></div>
<% end %>
<%= yield %>
<%= debug(params) if Rails.env.development? %>
</div>
<%= render 'layouts/footer' %>
I want to make content be in a 960px grid, like <div class="container"> except I want other content in the same dynamic template to be outside the container like Medium does with their full width images in contrast to the text that is in a container. See below:
You should only have one container. Use 'row' inside of containers and then 'col' inside of 'row'. See bootstrap docs on how to layout your pages.