<%= button_to '+',{:controller=>"line_items",:action=>"create", :menu_id => line_item.menu_id},class: "imagePlus",:remote => true %>
.imagePlus {background-image: url('..public/images/minus.jpg');}
I want to set a background_image to this button.I have used the class having background_image, but didn't get expected result.
Try in this way:-
.imagePlus{background-image: url("/public/images/minus.jpg");}
The problem is most likely due to your calling of the background image.
More specifically, I believe you'll benefit from using the asset_url helpers, with one of the CSS prepropcessors (SCSS / SASS):
#app/assets/stylesheets/application.css.scss
.imagePlus {
background: {
image: asset-url('minus.jpg');
}
}
This is, of course, if your button_to syntax is correct
Button Styling
As per this JSFiddle, you should be able to see the background image on your button with your code (which means that if you get the CSS set up correctly, it should work).
You'll be better using Mandeep's comment, and creating a styled link_to element. Either way, here's what I'd do for both types of input:
#Button
<%= button_to "+", line_items_path(line_item.menu_id), class: "imagePlus", remote: true %>
#Link
<%= link_to "+", line_items_path(line_item.menu_id), class: "imagePlus", method: :post, remote: true %>
Related
I have two rails helper on my application helper:
def active_class(link_path)
current_page?(link_path) ? 'active' : ''
end
def active_class_white(link_path)
current_page?(link_path) ? 'active-white' : ''
end
One is for regular links the other one is for the submenus. Usually I place the link like this:
<%= link_to "Home", root_path(:anchor => 'home'), class: "nav-link #{active_class('/')}", :"data-id" => "home" %>
Now here's my problem. On my homepage I got this link where it will slide to a particular section of the site thus requires a character like #about. If I place:
<%= link_to "About", root_path(:anchor => 'about'), class: "nav-link #{active_class('/#about')}", :"data-id" => "about" %>
It's still putting the active class on the home text instead of the about (the homepage is a one page slider type).
Another thing is that for complicated url like the devise edit profile, I tried to put the ff:
<%= link_to "Edit Profile", edit_user_registration_path(current_user), class: "dropdown-item #{active_class_white('/users/edit/:id')}" %>
Placing /users/edit/:id doesn't work on this kind of URL: http://localhost:3000/users/edit.13
On this two kinds of URL my code doesn't work. Any idea how to make them work or turn this around?
Anchors are purely client-side and are not sent along with the request to the server. So, the only way to implement the first part of your question is through Javascript. You can listen for a click event on links then add the active class to the one that was clicked.
The second part of your question, where you pass in the :id segment key, can be solved by passing a route helper (along with an object) to current_page? instead of an explicit string...
class: <%= active_class(edit_user_registration_path(current_user)) %>
I'm following along here: Text Helper
Specifically I'm using the last example and have in my code:
<%= truncate_html(posts.content) {link_to "Continue", post_path(posts.url_name)}%>
The first part of the truncate works but the link does not appear. Any idea why my link isn't appearing?
I don't know the truncate_html, but you could use this questions answer with a block in the end:
<%= truncate(posts.content, :escape => false) { link_to "Continue", post_path(posts.url_name) } %>
That would create the result you want.
truncate_html does not appear to be a valid method in the Rails base code. Try with truncate
<%= truncate(posts.content) {link_to "Continue", post_path(posts.url_name)}%>
image_tag('batman.png' size:'100%xauto')
The size 100% x Auto is ignored as it does not follow the convention outlined in the Rails API.
Is there a way to do this in rails without the need of a global / specific css class?
size is spitted across the 'x' and on both side it finds for numbers. checkout the code
You can use 'style' option for image_tag.
UPDATE:
You can use the image tag with style as followed
= image_tag 'image_url', style: 'height:100%;width:auto;'
<%= image_tag('batman.png', :size => '100%xauto') %>
This works:
<%= image_tag 'image_url', style: 'height:100%; width:auto;' %>
But if you don't want to write your styles inline, then you can use a class instead:
<%= image_tag 'image_url', class: 'some-class-name' %>
I'm using f.semantic_fields_for with haml
here is the current snippet.
%ul.documents
=f.semantic_fields_for :documents do |u|
= link_to(u.object.comment.presence || u.object.file.original_filename, u.object.file.url)
= u.input :comment, :as=>:string
= u.hidden_field :_destroy
= link_to_function image_tag("/img/del_documets.png"), "remove_fields(this)", :class => "btn"
the problem here is that only "u.input :comment, :as=>:string" is inside the "li" created by formtastic. The links and other fields get somewhere else and its kinda impossible to style correctly this broken html.
Is there anyway to make sure everything get inside the correct li?
Even if I add a li just after f.semantic_fields_for, it will only wrap the first link and the following elements will get wrapped only by the ul completely above.
It seems like formtastic always wraps inputs with <li> to avoid <fieldsets> to be inside <ol>, which is not valid.
Your best way around that is to put <li> around all your elements and add wrapper_html => { :class => :your_class } to your input if you like. That way you can style things your way.
I don't think you need the ul.documents around the inputs, semantic_fields_for already wraps everything using <ol>.
That't the thing with libraries that generate html directly, you'd better adapt your html and css to them instead of trying to make them generate your html.
I would do that (and style my own CSS from it):
=f.semantic_fields_for :documents do |u|
%ul.documents
%li= link_to(u.object.comment.presence || u.object.file.original_filename, u.object.file.url)
= u.input :comment, :as=>:string
%li= u.hidden_field :_destroy
%li= link_to_function image_tag("/img/del_documets.png"), "remove_fields(this)", :class => "btn"
Hope this helps.
You could also override the default behavior of Formtastic when it generates the inputs wrapper like this:
module Formtastic
module Inputs
module Base
module Wrapping
def input_wrapping(&block)
template.content_tag(:li,
[template.capture(&block), error_html, hint_html].join("\n").html_safe,
wrapper_html_options
)
end
end
end
end
end
Notice the content_tag(:li. You could replace it by content_tag(:div for example.
You know how to override module methods in Rails?
I have a rails 3.2 app using Twitter Bootstrap via the gem 'twitter-bootstrap-rails'. Additionally the forms are created with the SimpleForm gem For a number of the pages I've used the twitter buttons on the form via
<%= link_to "Back", :back, :class => 'btn btn-warning'%>
<%= form.button :submit, :class => 'btn btn-primary' %>
The buttons are rendered ok. The issue is that after you select one of the buttons, which visits the link, on returning to the page the text is stuck on the greyed out version as shown below for the 'back' button:
This causes a problem, especially on the buttons styled with 'btn-primary' as the text is hard to read. An example of this is below:
Wondering what setting needs to change and where. I expected it should be in the bootstrap_and_overrides.css.less file but not sure what setting to try. Tests on #linkColorHover didn't work.
Any thoughts ?
The best solution I found for this problem is to remove scaffolds.css.scss in the app/assets/stylesheets directory as suggested by #tonymarschall above in the comments.
You could always style the a.btn items, to remove the decorations on the pseudo classes such as :visited
As an alternative you can use button_to instead of link_to in your templates.
Because this creates a new form, if you want to simulate the link behaviour, you need to use the :method => :get parameter. You can find more info here.
Kind of a combination of a few of the answers, but simply replace:
color: #666;
With:
color: white;
In scaffolds.css.scss
You should use Firebug or Chrome's Developer Tools to find out which CSS property you'd have to override in bootstrap_and_overrides.css.less.
It's kinda hard to tell by looking at images.