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 %>
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 have a new.html.erb and a _form.html.erb
How do you align a button and a link if the back link is in the new.html.erb file while, a submit button would be in the _form.html.erb?
new.html.erb
<%= render 'form' %>
<%= link_to 'Back', project_path %>
_form.html.erb
<%= simple_form_for(#trip) do |f| %>
<%= f.input :project_name, class: 'form-control' %>
<div class="top-buffer">
<%= f.button :submit, class: "btn btn-primary pull-right" %>
</div>
<% end %>
Is there a rails way to align the back and the button together? What would be the conventional way?
Should I just simply put the back button in the _form.html.erb? Will this affect anything in the long run?
_form.html.erb is what is called a partial. Partials allow you to remove unnecessary duplication of code. They help breaking the rendering process into more manageable chunks without changing functionality.
To answer all of your questions, ask yourself why you are using a partial. If this is to remove duplication then go ahead and move the back button inside _form.html.erb.
Now, if you could provide some css we could actually help you to center those buttons.
UPDATE
I have just realised you are using bootstrap. In this case try updating your link to this...
<%= link_to 'Back', project_path, class: "btn btn-primary pull-left" %>
and see if it solves your problem.
This is what I got ...
... and it seems more or less aligned to me.
I have been trying to find something about embedding HTML code inside a partial argument for days but I have not found anything so I'm guessing it isn't possible. But it seems like it should be.
I have a static page in my Rails app which has a lot of sections and each section can have subsections. I could just make the entire page just plain HTML. But I didn't want to repeat the same formatting over and over in case I want to change classes or something else.
So I have the following _section.html.erb partial file:
<div class="row">
<h4><%= heading %></h4>
<% subsections.each do |section| %>
<% if section[:header] %>
<h5 class="primary-text"><%= section[:header] %></h5>
<% end %>
<p><%= section[:body] %>
<% end %>
</div>
That works fine. But what if I want to include a link to a page or an email inside one of the subsections? It doesn't work just by passing it in as part of the quotes text. It shows the actual HTML tags.
Is there a real way to do this or should I give up and just write plain HTML with repeated section formatting?
You mark your text as html_safe. For example:
<%= section[:header].html_safe %>
But I would suggest using sanitize method because of security resonons:
<%= sanitize section[:header] %>
Probably sometimes you will want to configure sanitize method. Here you can read how to do this:
http://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html
You can read more about security here:
http://guides.rubyonrails.org/security.html#cross-site-scripting-xss
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') ;)
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 !