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>
Related
I have this code for displaying comments on an article which uses ERB elements to fetch and display information from a database:
<div class="comments">
<h4 class="comment_author">Comment by <%= comment.author_name %></h4>
<p class="comment"><%= comment.body %></p>
</div>
I would like to format the comment.author_name differently, so I wanted to include an id on the second line e.g.
<h4 class="comment_author">Comment by <%= comment.author_name, id: "commenter" %></h4>
However, when I do this I get the following error message.
I have added classes and ids in the past to form elements with the
:class => "name" syntax like so:
<%= f.submit 'Create Article', :class => 'create_new_article_button'%>
But that doesn't seem to be working here either. Is there a different way to add ids and classes to non-form ERB elements?
Thanks in advance!
<%= comment.author_name %> is not a tag/element, its just a value(string i assume) & hence you cannot add an id attribute to it. You could instead do
<h4 class="comment_author">Comment by
<span id="commenter"><%= comment.author_name %></span>
</h4>
Or give the id="commenter" directly to the <h4> tag & use that to target the span.
It worked earlier because f.submit refers to a submit button of a form, meaning it was actually an HTML element & hence you could add an id or a class to it.
You can not add an ID to a content. Instead you should add ID to the element which is wrapping your content. In your case it should be like this
<h4 class="comment_author" id='commenter'>Comment by <%= comment.author_name %></h4>
This will create h4 element with an ID 'commenter'.
You are confusing here
I have added classes and ids in the past to form elements with the
:class => "name" syntax like so:
<%= f.submit 'Create Article', :class => 'create_new_article_button'%>
But that doesn't seem to be working here either.
Form elements will receive class has one of it's arguments. Check the docs here . But <%= %> will just display the end result of ruby code in the views, but it won't add any html content to the DOM. Please read docs carefully before implementing something.
I need to remove <a> tag from rails link_to method. Here is current code and result:
<%= link_to "ESP", :locale=>'es'%>
<a href="/es/blog/crazy_page">ESP</p>
Here is my desired outcome:
/es/blog/crazy_page
Reason I need this is so I could make "alternate" link tag in header for each language. Can't seem to find this anywhere.
Use url_for method
<%= url_for(:locale => 'es') %>
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.
So in html you can have the code <img class="myimage" src="image.jpg"> which makes editing in .css easier.
What is the equivalent of this when working with a .html.erb file?
e.g where do I define the class in this <%= image_tag "image.jpg" %>?
You can still use the native HTML in a .html.erb file, exactly as you've shown. This definitely works in the ERB template:
<img class="myimage" src="image.jpg">
This will often render slightly faster than using a dynamic approach, and has the benefit of being exactly what you intend.
If you choose the dynamic tag option, you can refer to the ActionView::Helpers::AssetTagHelper reference. To get the Rails (ActionView) equivalent to what you've shown, you can use this syntax:
<%= image_tag 'image.jpg', class: 'myimage' %>
Note that the portion with the class: 'myimage' is providing the class attribute as a hash value, and this is simply shortcut syntax for { class: 'myimage' }.
You can also provide an ID to distinguish this image from other images of the same class by providing the id option, like so:
<%= image_tag 'image.jpg', class: 'myimage', id: 'image-1' %>
This will generate the following HTML:
<img src="image.jpg" class="myimage" id="image-1">
From that point, you can style the image-1 image independently of other myimage images, should you need to do so.
you can use this syntax;
<%= image_tag('foo.jpg', class: 'myimage') %>
it will work for you!
I think comma will help, so:
<%= image_tag 'foo.jpg', class: 'bar' %>
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