I have a button below:
<table align="center" width="50%">
<tr>
<td style="color: #212121;">
<div class="button">
<%= button_to "Search", {:class => "buttonhome" } %>
</div>
</td>
</tr>
</table>
I am applying buttonhome class i.e below
.buttonhome
{
height: 100px;
width: 200px;
font-family: Arial;
background-color: transparent;
border-style: none;
font: white;
}
But its not applying on the button. Kindly suggest me. Waiting for reply. Thanks
<%= button_to "Search", {action: "search"}, {class: 'buttonhome'} %>
possible duplicate 1 2
Try
div.button .buttonhome
{
height: 100px;
width: 200px;
font-family: Arial;
background-color: transparent;
border-style: none;
font: white;
}
also check if your css is loading fine and your button has the class buttonhome.
The html_option is 3rd parameter of button_to according to documentation
http://apidock.com/rails/ActionView/Helpers/UrlHelper/button_to
so use this
<%= button_to 'Search', {}, { :class => "buttonhome" } %>
Related
Every cycle I get the new Thumbnail BUT under the previous one. Any suggestions how to solve that? How in each cycle add the new Thumbnail horizontally next to the previous one, until the space is fill and then move to the next line? Thanks.
From TO Picture
CODE
<% #employees.each do |em| %>
<div class="listTumbnail">
<% if em.user.imagepath %>
<div class = "user-image">
<img src="<%= em.user.imagepath%>" class="listimg">
</div>
<% else %>
<div>
<%= image_tag("icons/desconocido.jpg", :alt => "not found", :class => "listimg") %>
</div>
<% end %>
</div>
<% end %>
.user-image {
float: none;
padding-top: 127px;
margin-left: 193px;
padding-left: 6px;
border-left-style: solid;
border-left-color: #000;
border-left-width: 1px;
}
.listimg {
display: block;
max-width:80px;
max-height:100px;
width: auto;
height: auto;
margin: 0 auto;
border-radius: 40px;
}
.listTumbnail {
border: 2px solid #95989A;
border-radius: 3px;
color: #000;
height: 140px;
width: 110px;
margin: 5px;
}
try adding this to your stylesheet:
.listThumbnail {
display: block;
}
.user-image {
display: inline-block;
}
If for some reason you don't have a css file in your project, here's one basic way to add one:
Create a file named my_styles.css (or whatever you want to name it) & add the above css examples there.
Add the following link in the <head> of your application.html.erb file:
<link rel="stylesheet" type="text/css" href="my_styles.css">
This allows your html file to work with your css file/stylesheet.
No matter what I put for the size option, the size remains the default 80 x 80. Any ideas why this might be?
<%= link_to gravatar_for(micropost.user, options = { size: 100 }), micropost.user %>
I thought there might be something in CSS that's overriding the parameter, but couldn't find anything:
.gravatar {
float: left;
margin-right: 10px;
}
.gravatar {
float: left;
margin-right: 10px;
}
img {
display: block;
padding: 5px 0;
}
I'd go about another aproach here if it is the https://github.com/mdeering/gravatar_image_tag gem you're using.
<%= link_to micropost.user do %>
<%= gravatar_image_tag('micropost.user', :gravatar => { :size => 15 }) %>
<% end %>
Try this:
<%= link_to gravatar_for(micropost.user, micropost.user), size: 100 %>
For more information on the usage of link_to helper method see RoR API here:
http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to
A snipet of your HTML code from browser's console would also be helpful here to help you better.
I have been working with Michael Hartl's tutorial and I am almost finished. However, I got near the end and am have a problem styling the micropost section of the "user/show/" page. I would like all the microposts to be under one another. Currently they are showing like this:
custom.css.scss
.microposts {
list-style: none;
padding: 0;
li {
padding: 10px 0;
border-top: 1px solid #e8e8e8;
}
.user {
margin-top: 5em;
padding-top: 0;
}
.content {
display: block;
margin-left: 60px;
img {
display: block;
padding: 5px 0;
}
}
.timestamp {
color: $gray-light;
display: block;
margin-left: 60px;
}
.gravatar {
float: left;
margin-right: 10px;
margin-top: 5px;
}
}
aside {
textarea {
height: 100px;
margin-bottom: 5px;
}
}
span.picture {
margin-top: 10px;
input {
border: 0;
}
}
microposts.html.erb
<li id="micropost-<%= micropost.id %>">
<%= link_to gravatar_for(micropost.user), micropost.user %>
<span class="user"><%= link_to micropost.user.name, micropost.user %></span>
<span class="content"><%= micropost.content %></span>
<span class="timestamp">
Posted <%= time_ago_in_words(micropost.created_at) %> ago.
</span>
</li>
show.html.erb
<% provide(:title, #user.name) %>
<div class="row">
<aside class="col-md-4">
<section class="user_info">
<h1>
<%= gravatar_for #user %>
<%= #user.name %>
</h1>
</section>
</aside>
<div class="col-md-8">
<% if #user.microposts.any? %>
<h3>Microposts (<%= #user.microposts.count %>)</h3>
<ol class="microposts">
<%= render #microposts %>
</ol>
<%= will_paginate #microposts %>
<% end %>
</div>
</div>
If someone could please help me, it would be highly appreciated. Thank you in advance!
You need to clear the floats. Try adding clear: both; to your .microposts .li SASS
.microposts {
list-style: none;
padding: 0;
li {
padding: 10px 0;
border-top: 1px solid #e8e8e8;
clear: both;
}
JSFIDDLE DEMO
I am a Ruby Newbie and I am following the Book Agile Development with Rails 4, page 95
I created a second store controller and get the following error: undefined local variable or method `products'. Somebody knows what is missing?
View
<% if notice %>
<p id="notice"><%= notice %></p>
<% end %>
<h1>Your Pragmatic Catalog</h1>
<% #products.each do |product| %>
<div class="entry">
<%= image_tag(product.image_url) %>
<h3><%= product.title %></h3>
<%= sanitize(product.description) %>
<div class="price_line">
<span class="price"><%= products.price %></span>
</div>
</div>
<% end %>
class StoreController < ApplicationController
def index
#products = Product.order(:title)
end
end
.store {
h1 {
margin: 0;
padding-bottom: 0.5em;
font: 150% sans-serif;
color: #226;
border-bottom: 3px dotted #77d;
}
/* And entry in the store catalog */
.entry {
overflow: auto;
margin-top: 1em;
border-bottom: 1px dotted 77d;
min-height: 100px
img {
with: 80px;
margin-right: 5px;
margin-bottom: 5px;
position: absolute;
}
h3 {
font-size: 120%;
font-family: sans-serif;
margin-left: 100px;
margin-top: 0;
margin-bottom: 2px;
color: #227;
}
p, div.price_line {
margin-left: 100px;
margin-top: 0.5em;
margin-bottom: 0.8em;
}
.price {
color: *44a;
font-weight: bold;
margin-right: 3em;
}
}
}
<span class="price"><%= products.price %></span>
should be
<span class="price"><%= product.price %></span>
How can I add an icon to a rails button with css?
My request is both for <% button_to %> and <% f.submit %>
Thanks for helping
Hello #jdc I've finally found the trick, I did not use your method, but it was helpul to find my way.Thanks a lot man.So thi is How i proceed :
1°) Change the html.erb code from :
<%= f.submit %>
to
<%= f.submit , :id => 'button' do -%>
<% end %>
2°) In the app/assets/stylesheets and put the following css code:
#button {
background-image: url(plus_8x8.png);
background-repeat:no-repeat;
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:12px;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px;; /* I put this here to move the text away on older IE junk */
}
Of course #button at the top of the css code is the :id name in <%= f.submit , :id => 'button' do -%> code in the html.erb file
I hope this will help you guys to style css button on rails 3 applications.
If I understand what you're asking, you could try something like this:
<% f.submit :html => { :class => 'imgbutton' } %>
then in your css:
background: url(someicon.gif);
border: none; /* If your icon IS the button */
color: transparent; /* If you don't want the button text to show up */
*padding-left: 9999px; /* I put this here to move the text away on older IE junk */
Might not work for some really ancient browsers to do it with CSS though.