So, I have a rails partial (an image of a car) that I want to put between two arrows ("<" and ">").
Here's my haml:
.col-sm-12
<
= render partial: 'vehicle_image', locals: { quotation_request: quotation_request }
>
The problem I'm having is that I can't get the two arrows to show up on the same row as the image.
Any ideas on how this can be fixed?
You could probably assign the arrows to some sort of element instead and lay things out like this
.row
.col-sm-1.text-right
<
.col-sm-10
= render partial: 'vehicle_image', locals: { quotation_request: quotation_request }
.col-sm-1.text-left
>
You may have to do a bit of CSS to reduce the paddings/margins so that it that arrows end up where you want them exactly.
I just attempted it on a personal project using:
.row
.col-lg-1
%h1
<
.col-lg-8
= link_to place_path(place) do
= image_tag place.main_image.url(:medium), class: 'img-responsive img-place', alt: place.name
.col-lg-1
%h1
>
And got roughly this result after a bit of margin tweaking:
Related
A page has a function to choose some values for CSS class attributes.
The rails application show view has a style block and a div using those styles:
<style>
#bg_<%= #promolayout.id %> {
background-color: <%= #background.first.background_color %>;
color: <%= #background.first.color %>;
border-radius: <%= #background.first.border_box_radius %>; }
</style>
<div class='grid-x grid-padding-x'>
<div class='cell small-3' id='bg_<%= #promolayout.id %>'>
[...]
</div>
<div class='cell small-3' id='bg_newrender'> </div>
</div>
Lower in the page are form_with forms to change individual attributes values of CSS items via AJAX. The process updates as expected. The relevant js file for the rendering has two lines, one to display the new value with the form, the other to render (what was expected) a new version of the block with the new attribute (thus creating a before-after view). The second line invokes:
$("#bg_newrender").html('<%=j (render 'promolayout') %>');
the promolayout partial invokes the same CSS classes
<style>
#bg_<%= #promocomponent.promolayout_id %> {
background-color: <%= #background.first.background_color %>;
color: <%= #background.first.color %>;
border-radius: <%= #background.first.border_box_radius %>;
}
</style>
and the div with the id='bg_newrender' renders with the updated CSS attributes as expected.
What was not expected was that the initial div with id='bg_<%= #promolayout.id %>' also renders with the new CSS attributes.
The classes have the same name, but the target div has different IDs.
Why is a differently IDed object on the page also being rendered with the updated class attributes?
If you want to add styling dynamically to a single element instead use inline styling.
Usually we frown upon the style attribute as the rule of thumb is to separate content and presentation. But if you are dynamically generating an inline CSS tag with ERB the separation of concerns went out the window a long time ago and your really just making a mess out of your view.
In your Rails app you'll want to write a helper or builder class that creates the div tag with a style attribute.
Which would look something like:
module PromoHelper
def promo_component_tag(promo, **opts, &block)
options = opts.reverse_merge(
class: 'promo-box', # or whatever
style: hash_to_inline_style({
background_color: promo.background_color,
border_box_radius : promo.border_box_radius,
color: promo.color
})
)
content_tag :div, options, &block
end
private
def hash_to_inline_style(hash)
hash.map do |k,v|
"#{k.to_s.dasherize}: #{v};"
end.join
end
end
This is an extremely simplified example and will need to be adapted to your use case.
And you then call it in your view:
<% #promotions.each do |p| %>
<%= promo_component_tag(promo) do %>
# ...
<% end %>
<% end %>
When it comes to handling the actual user interaction you can either submit the form and have Rails re-render the view and replace the contents in the DOM or you can use element.style or jQuery.css to change the styling optimistically on the fly and just send the AJAX call in the background to update the database values. The latter will give a much snappier feel and ties in nicely if you want to let users preview the change.
Here's the problem. I have one haml page with a list that looks like this:
It's a list with elements formed by a div (left side) and an ul of buttons (right side). Here's the summarized code:
%li.rutinas-li{style: "overflow:visible"}
%div{ style: "display: inline-block;" }
= link_to ...
...
%br
%p ...
%br
%span
= ...
.thumbs-container
=link_to ...
= icon('thumbs-up', ...)
%strong ...
.thumbs-container
=link_to ...
= icon('thumbs-down', ...)
%strong ...
.thumbs-container
=link_to ...
= icon('star', ...)
%ul.pull-right.without-bullets.no-padding
%li.inline-block= link_to ...
%li.inline-block= link_to ...
%li.inline-block= link_to ...
%li.inline-block.dropdown
%a.dropdown-toggle{"data-toggle": "dropdown", type: "button"}
= icon('share-alt', ...)
%ul.dropdown-menu{style: "min-width:0"}
%li{style: "padding: 15px"}
= link_to ...
= icon('envelope', ...}
%li{style: "padding: 15px"}
= link_to ...
= icon('twitter', ...")
%li{style: "padding: 15px;"}
= link_to ...
= icon('facebook', ...)
I need the line 1 {style: "overflow:visible"} because the last ul is a dropdown that looks like this:
And if I remove it the dropdown is cropped. However, this css property causes also that when the screen is smaller ( a mobile phone, for example), the list is displayed like this:
And I would like it like this instead:
As the overflow is permitted, the list of buttons on the right are overflowing the parent and his white separators, it is kind of ugly. But if I remove {style: "overflow:visible"} the dropdown won't be visible when I click on it
Your problem is just the width and height of your elements, you must change it if the device is smaller.
Think responsive ! A great solution would be to create a media query and to place your buttons under your text.
If you don't want your ' li ' to have a too big height, you could also place differently your text so it could take the full width too.
I've been working on an application in ruby on rails and trying to display list of check boxes like this
[ ] Conflict Resolutions
[ ] Customer Know how
[ ] personal Branding
But I managed to get this
Conflict Resolution
[ ]
Customer Know How
[ ]
Personal Branding
[ ]
My html.haml file looks like this
.col-md-6.col-md-offset-3
= form_for(#user) do |f|
= f.label :conflict_resolution, 'Conflict Resolution'
= f.check_box :conflict_resolution
= f.label :customer_know_how, 'Customer Know How'
= f.check_box :customer_know_how
= f.label :personal_branding, 'Personal Branding'
= f.check_box :personal_branding
Tried Display:inline for inputtype = checkbox . Didn't work out!!
Use
input[type='checkbox'] { display: block; float: left; }
input[type='checkbox'] + label { display: block; }
If you don't want this to affect the visual representation of checkboxes and following labels on other parts of your application (that uses the same css), you need to give the rule some html context by preceding both rules with a selector matching it's parent (that is different from all other parents on other pages/parts of the application).
If you can change your haml a more elegant solution would be having the label element wrapped around the checkbox so if you click the label it activates the box.
here's how you can do that:
= form_for(#user) do |f|
= f.label(:conflict_resolution) do
= f.check_box :conflict_resolution
Conflict Resolution
= f.label(:customer_know_how) do
= f.check_box :customer_know_how
Customer Know How
= f.label(:personal_branding) do
= f.check_box :personal_branding
Personal Branding
I'm following this tutorial: http://ruby.railstutorial.org/chapters/sign-up#top and I have a problem with styles for error messages from rails.
I want to accomplish this:
But instead of that my form breaks and I get this ugly form:
I checked a source code and there are nov div tags inserted instead of label and input:
How to override that behavior and accomplish that form is only highlighted like in the tutorial?
Thank you.
EDIT 1:
I found out where is the problem. I'm using Bootstrap 3.1.0 and extend is not working there. So, this is not working:
#error_explanation {
color: #f00;
ul {
list-style: none;
margin: 0 0 18px 0;
}
}
.field_with_errors {
#extend .control-group;
#extend .error;
}
And because of that this code doesn't work like it should:
<% if #user.errors.any? %>
<div id="error_explanation">
<div class="alert alert-error">
The form contains <%= pluralize(#user.errors.count, "error") %>.
</div>
<ul>
<% #user.errors.full_messages.each do |msg| %>
<li>* <%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
I can't find a way to make that extend working. Like control-group is not present...
EDIT 2:
Ok, when I add this code to config/environment.rb the form doesn't break but can't accomplish red lines around forms where is wrong input:
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
html_tag.html_safe
Why are you using Bootstrap 3? The tutorial tells you to use
gem 'bootstrap-sass', '2.3.2.0'
in your gemfile. You really should do so, because the tutorial provides you with a whole lot of code that is meant to be used with Bootstrap 2. Of course, it breaks with Bootstrap 3. If you really want to use B3 you will have to change quite a few class names in your views. Among other changes do this:
change div class="alert alert-error" to div class="alert alert-danger"
apply form-group and form-control classes to your form fields (see example here).
in your CSS:
.field_with_errors {
#extend .has-error;
}
Then do all the other changes mentioned here.
This seems to be quite a common error - have you ever tried either of these:
Rails field_with_errors and Bootstrap form-horizontal
Ruby field_with_errors doesn't #extend .control-group .error
#extend documentation
Precompile
Failing that, you may wish to try asset precompiling:
#config/environments/production.rb
config.serve_static_assets = true
config.assets.compile = false
$ rake assets:precompile RAILS_ENV=production
Mixins
This won't fix it directly, but you could create a mixin for the styles, and include that like this:
#mixin error {
display: block;
etc
}
.field_with_errors {
#extend .control-group;
#extend .error;
}
I have a Rails 4.0.1 app that shows a set of image links on the homepage. Rails gets the image names from the Industry model. Each image should show a hover image on mouseover.
I've tried this:
<% #industries.each_with_index do |i,n| %>
<li class="col-md-2 col-md-offset-1">
<%= link_to image_tag(i.img_full, alt: i.name, class: 'industry_thumb', mouseover: i.img_full_mo), companies_path(industry: i.name) %>
</li>
<% end %>
However, this results in this HTML:
<li class="col-md-2">
<a href="/companies?industry=Personalberatung">
<img alt="Personalberatung" class="industry_thumb" mouseover="branchen_personalber_mo.png" src="/assets/branchen_personalber.png">
</a>
</li>
When I was expecting the mouseover: to work like described here:
http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/image_tag
I found not too many articles about this issue which is why I'm guessing there's an alternative way using CSS. However, how would I achieve the same effect with CSS if I want to dynamically generate the image links? Unfortunately, moving the default and the hover image into one image and using something like this:
.button-class {
border: 0;
background: url('../assets/images/button.png') no-repeat 0 0px;
}
.button-class:hover {
background: url('../assets/images/button.png') no-repeat 0 20px;
}
isn't possible in this case. Unless there's an automatic way to combine the two images during assets:precompile?
Many thanks for your help!
image_tag(class_door(student_class), onMouseover: "this.src='/assets/open_door.png';", onMouseout: "this.src='/assets/closed_door.png'" )
I have the above code is working for me , note that class_door(student_class) is a helper in my application
the mouse over method is onMouseover: not mouseover:
Try this.
.col-md-2 a img:hover{
/*Your hover values should be here*/
}
Hope this helps.
You should use something like this to be consistent with the asset pipeline way:
image_tag(class_door(student_class), onMouseover: "this.src='#{image_url("/assets/open_door.png")}';", onMouseout: "this.src='#{image_url("/assets/closed_door.png")}'" )