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') ;)
Related
very straight forward..
how do I add a class to something like this
<h2><%= guide.title %></h2>
which is just displaying text?
You have to wrap it within some container:
<div class="my_class"><%= guide.title %></div>
The container you'll use depends on the context given text is to be used.
Update:
Since the text is already wrapped in <h2> you can do:
<h2 class='my_class'><%= guide.title %></h2>
Another update:
If you wan to minimize the amount of pure html in your view, you can always do:
<%= content_tag :h2, class: 'my_class' do %>
<%= guide.title %>
<% end %>
My main page content is generated with this code:
<% #post.each do |post| %>
<div class="post" style="background:url(<%= post.postimg.url.to_s%>)center center">
<div class="overlay">
<p class="post_title"><%= post.titre %></p>
<p class="post_pseudo"><%= link_to Utilisateur.find(post.utilisateur_id).pseudo ,Utilisateur.find(post.utilisateur_id).pseudo %></p>
</div>
</div>
<% end %>
This snippet is inn _postgeneration.html.erb. The main page (index.html.erb ) look like this :
<%= render "headerhome"%>
<%= render "postgeneration"%>
When the user is redirected from a controller with redirect_to , everything works as expected, my posts are displayed. But when my page is generated from a link_to, only my HTML is displayed correctly. Here's my syntax for link_to
<%= link_to "homepage", '/home'%>
It looks like link_to refuse to render html elements dynamically generated.
The #post.each do wasn't ignored. The post were generated, but without visual, because the visual was set in inline css. The solution was to delete the inline css and put a image_tag. Now everything is working as expected. I didn't know Rails could ignore inline css. Thanks everyone !
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.
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
I am making a rails app, and I have a class that is a link (its inside a tag). I want <%= User.find_by_id(p.user_id).username %> to be a link to the user, so my questions are:
1) How do I make it a link to the user?
2) When I click on a link that I make, that is inside another link, it activates the outer link. How can I make the click respond the the inner link instead? (in the code under).
<div class="row">
<a class="fg" href="#<%= p.id %>" data-toggle="modal">
<div class="span6 offset3">
<div class="thumbnail">
<table border="0" width="100%" cellpadding="5px">
<tr>
<td>
<%= image_tag(p.thumbnail, class: "hoi") %>
</td>
<td id="tzt2" width="60%">
<div id="withJosefin">
<%= p.title %>
</div>
<div id="withLibre">
by <%= User.find_by_id(p.user_id).username %> <%= time_ago_in_words(p.created_at) %> ago
</div>
</td>
</tr>
</table>
</div>
</div>
</a>
</div>
You can create a link using this syntax:
<% user = User.find_by_id(p.user_id) %>
<%= link_to user.username, user %>
Which is equivalent to:
<%= link_to p.user.username, user_path(p.user) %>
By the way, why do you load the user manually? If your associations are set up correctly, you can just write:
<%= link_to p.user.username, p.user %>
I'm not sure I understood your second question. If you can explain it a bit more clearly I'll edit my answer.
You cant nest hyperlinks.
You could either use some JavaScript to simulate the effect of nested hyper links, or a better solution is to reorganize your markup so that it is valid markup. i.e. your first tag shouldnt contain divs etc.