I am using a select_tag:
<%= select_tag :s_user_type, options_for_select(User.all.map(&:user_type).uniq.compact.collect{|e| [e]}, user_type), { :multiple => false, prompt: 'I am looking for a ...', class: "input-lg dropdown-home form-control" } %>
which renders into the dropdown below. I am trying to figure out, how to change the default icon of the drop_down (up and down arrow shown in the circle below) with an icon of fontawesome (e.g. this ). Is this possible? If so, any clue how can i do this in Rails?
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.
I have a page using materialize framework, with a select field:
.input-field
Region(s)
= select_tag 'user[region_ids][]', options_for_select(#regions_list), :multiple => true, :class => %w(toHide regionSelector validate), :required => true
%label{ for: "user[region_ids][]" } The region is required
The validation popup is aligned to the top-left corner of input-field, but I'd like it to be aligned to bottom-left or bottom-center. How would I make that change?
This issue is due to using a pre v0.100.2 version of Materialize. The latest version of Materialize and its associated documentation can be found here: https://github.com/Dogfalo/materialize
I have a menu that is hidden in mobile view of application and viewable in desktop view. So since it's not activated the items in that menu shouldn't be focused when tab through but they are tab-able when the menu is hidden.
This is what I see in applicantion.html.haml
......
.page-layout
.page-layout-sidebar
=link_to '/', class: "page-Branding page-Branding--secondary" do
= image_tag site_logo_src, alt: 'Logo'
%nav.page-Layout-nav{'aria-label' => 'Primary Navigation', 'role' => 'navigation'}
%ul.topia-Nav
- feature :item1 do
%li
=link_to t('menu.item1'), root_path, { :class => 'page-Nav-action'}
- feature :item2 do
%li
=link_to t('menu.item2'), item2_path, { :class => 'page-Nav-action'}
......
I did inspect on page and I see page-Nav-action in multiple css files. I tried using tabindex: -1 in html it works in mobile view but then in desktop view I can't tab through menu items. Also tabindex is HTML attribute so can't use in CSS. I am guessing I have make changes from CSS. Any help is appreciated.
tabIndex is the value you need in HTML. Setting to -1 will make sure the tab button will not focus the element. There's no supported method to do this in CSS. You can toggle the tabIndex value in Javascript.
window.onresize = function(){
if(this.innerWidth > 500){
tabIndexes(0)
} else {
tabIndexes(-1)
}
}
function tabIndexes(index){
var inputs = document.querySelectorAll('input');
for(var i = 0; i < inputs.length; i++) inputs[i].tabIndex = index;
}
I have a Rails app in which I use Boosttrap and HAML, when I present the flash messages I would like to change their appearance slightly. I want them to be full screen with cold-md-1 margins on each side, and a col-md-10 contains the flash message.
What I've tried is:
- if flash[:notice]
/ Full width is a css class with 100% width, so the width works...
.alert.alert-info.alert-dismissable.full-width
.col-md-1
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria- hidden' => "true"} ×
= flash[:notice]
.col-md-1
This doesn't work quite as I want (not the correct margins). I have also tried to contain the flash message like this:
.col-md-1
.col-md-10
[message]
.col-md-1
Then it looks ok, but the close button doesn't work as I want (it doesn't close the whole message). To illustrate what I what to achieve, see the image below:
Here I want the close button (note: only the close button, and not the background) to align with the account drop down and the gray box.
Any ideas on what I should do?
You are making simple thing look complex. You want to have col-md-1 margin on each side so your alerts width will be col-md-10 and bootstrap3 has col-md-offset-* classes for offsetting it.
- if flash[:notice]
.alert.alert-info.alert-dismissable.col-md-10.col-md-offset-1
.col-md-1
// give proper width and margin to this div to align button with dropdown
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria- hidden' => "true"} ×
= flash[:notice]
Solved it by using some javascript (or coffee-script). View:
.alert.alert-info.alert-dismissable.no-border-radius
.container
.col-md-1
.col-md-10
= flash[:notice]
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria-hidden' => "true"} ×
.col-md-1
JavaScript (or CoffeeScript):
$('.close').click ->
$(".alert").hide();
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")}'" )