I'm trying to color my view using css. The controller is workflows_controller. Hence i added the following code to the workflows.css.scss:
.folder_section {
text-align:center;
color: #244;
}
My view is
<div class="folder_section" id="folder_section">
<%= form_for :folder_name, :remote => true, :method => "get", :url => {:action => "show"} do |f| %>
<%= f.select :foldernames, options_for_select(#folders, #folders.first)%>
<%= f.submit "Submit folder"%>
<% end%>
</div>
The select box is aligned to the center but i could not see any color. I copy pasted the same code in the view itself. But still i could not see any color. Please let me know why the select box is aligned to the center but not colored. I looked into the web and some pdf documents. Everyone says that the controller.css.scss will take care of styling when you add the css code to it.
Thanks
The css color attribute is for setting the font color and the color you chose is quite close to black so you may not see a change.
Have you tried to set the background-color attribute to #244?
Or try to change the select field color attribute by defining it in the code
.folder_section {
select {
color: #244;
}
}
Related
I have an image with the following specs: 1920x795, resolution:300pixels inside the application.html.erb
<%= link_to image_tag('logo.png'), root_path, :class => "image_container img " %>
and this is the css in order to resize the image:
.image_container img
width: 94px
height: 40px
position: relative
Everything works perfectly, the image gets resized and also looks sharp too. Now, I'm trying to do the same thing inside a mailer view but I cant get the image to resize according to the css settings. The image appears at it's full size.
Any ideas on how to resize the image inside the html.erb mailer view?
In case if you're using an external stylesheet to maintain CSS for mailer views, I would like to tell you that it won't work.
You need to have inline styles for mailer views. Gmail even drops <style> tags. So have inline styling and then check again.
First you don't need to have :
:class => "image_container img "
just say :
:class => "image_container"
In the application.html.erb file you need to have
<%= styleseet_link_tag 'application', media: 'all' %>
and the render of the mailer view
<%= render 'mailerviewname' %>
And have the following file :
app>assets>stylessheets>application.scss
Then that will work
Note: This explanation is targeted for beginners.
I was facing the problem of not being able to change the image in a link_to when I hovered over the image. Nothing I did in CSS seemed to solve the problem. I present my solution to this problem below.
This is my link_to:
<%= link_to image_tag('1487789814_back.png'),
{controller: #controller_action_hash_from_params[:controller],
action: #controller_action_hash_from_params[:action]},
sql_text: #sql_text,
:id => "ralph-back-button-black-img", :class => "ralph-fieldset-back-button" %>
1487789814_back.png is an ordinary png in app/assets/images. It happens to be a black arrow pointing left. Similarly, app/assets/images/1487789814_back_red.png (used below) is a red arrow pointing left. I wanted the red arrow to appear when I hovered over a fieldset containing the black arrow.
The source of the problem:
The link_to above generates/generated the following HTML:
<img src="https://localhost:3000/assets/1487789814_back-731afaae70e04062b25988079e4ef8ab4e6b523f4ac11ff7d142a9ff01e63455.png" alt="1487789814 back">
Note:
The file https://localhost:3000/assets/1487789814_back-731afa...3455.png" will not exist for you. It's a filename automatically generated by Rails
Analysis:
The problem comes, in part, because (I believe) css cannot override HTML. That is, if you specify an attribute (e.g. width) in your HTML, you cannot override that in css. Similarly, (I believe) you cannot override the src="https: ..." in css. Any attempt (I believe) to use :hover will fail. To make this work, you'll need a bigger hammer: javascript or jquery.
My solution:
Please note: I am not claiming this solution is the best solution or even a good solution. I am claiming it works in my Rails 4 environment.
If you are using the asset pipeline in Rails 4 (Rails 3? Rails 5?), your "friendly" image names (in my case 1487789814_back.png and 1487789814_back_red.png) will be converted by the asset pipeline system into names with a cryptographic hash appended. In other words, to get access to the red arrow image you need to know what name Rails assigned to your image. It is beyond the cope of this little article to explain why Rails renames your image file; just know that it does. (Of course, your original file will still be there with its original name.)
So somehow we must "map" the friendly name (e.g. "1487789814_back.png") to the name in the asset pipeline.
I accomplished this by creating a div with "display:none" css.
erb:
<%# This div has display:none.
We do this in order to preload the images_path as well as create a "map"
between the friendly name and the asset pipeline name
%>
<div class='ralph_preload'>
<%= image_tag('1487789814_back.png', options={class:'ralph_preload_class', id:'1487789814_back'}) %>
<%= image_tag('1487789814_back_red.png', options={class:'ralph_preload_class', id:'1487789814_back_red'}) %>
</div>
The erb above generated the following HTML:
<div class="ralph_preload">
<img class="ralph_preload_class" id="1487789814_back" src="/assets/1487789814_back-731afaae70e04062b25988079e4ef8ab4e6b523f4ac11ff7d142a9ff01e63455.png" alt="1487789814 back">
<img class="ralph_preload_class" id="1487789814_back_red" src="/assets/1487789814_back_red-bbd0f2e34f3401cc46d2e4e1e853d472d8c01c9a75f96d78032738bd01b2133b.png" alt="1487789814 back red">
</div>
The associated css is:
.ralph_preload {
display: none;
}
I created some jQuery to change the black arrow to red when the user hovers:
<script type="text/javascript">
function get_precache_myStruct_array(outer_div_class){
var myStruct_array = [];
$('.'+outer_div_class).find(".ralph_preload_class").each(function(){
var myStruct = {
id: this.id,
src: this.src
};
// myStruct_array.push(myStruct);
myStruct_array[this.id] = myStruct;
});
return myStruct_array;
}
// See http://stackoverflow.com/questions/15352803/how-to-check-if-an-image-was-cached-in-js
function is_cached(img_url){
var imgEle = document.createElement("img");
imgEle.src = img_url;
return imgEle.complete || (imgEle.width+imgEle.height) > 0;
}
$(document).ready(function(){
var precache_myStruct_array = get_precache_myStruct_array("ralph_preload");
$.each(precache_myStruct_array,
function (index, value) {
if (!is_cached(value.src)) {
alert("Not cached!: " + value.src);
};
});
<% if true %>
$('#ralph-back-button-filedset').hover(function(){
var precache_myStruct_array = get_precache_myStruct_array("ralph_preload");
var imageID = '1487789814_back_red';
$('#ralph-back-button-black-img > img:nth-child(1)').attr("src", precache_myStruct_array[imageID].src);
}, function(){
var precache_myStruct_array = get_precache_myStruct_array("ralph_preload");
var imageID = '1487789814_back';
$('#ralph-back-button-black-img > img:nth-child(1)').attr("src", precache_myStruct_array[imageID].src);
});
<% end %>
});
</script>
You might notice a "<% if true %>" / <% end %> block in the jQuery. Since the jQuery is "inlined" into the .erb file, the jQuery goes through erb processing. By changing the true to false, it can make using browser debuggers easier to use.
Conclusion:
I did a search on the web to find the answer to my problem. I found none that is, as the lawyers say, on point.
I am, of course, enthusiastically open to corrections and comments.
If you put those images in your public folder, they will not get the extra hash added to the image name.
With that said, I ran a loop in my controller that got me all the "Rails" file names for my images and stored them somewhere I could access them easily.
I have the following collection_select field in a form, and I would like the 'Select a Garage' text to be gray (#555555) like the placeholder text for my other fields. How can I change this?
<%= collection_select :car, :garage_id, #garages.order('name ASC'), :id, :name, {include_blank: 'Select a Garage'}, { :multiple => false, class: "form-control garage-select" } %>
I am using Ruby 2.1.2 and Rails 4.1.4, as well as the simple_form gem. Thanks!
You can style the first option of the select box in your CSS.
select.garage-select > option:nth-child(1) {
color:#555;
}
EDIT
The browser default styling cannot be overwritten. You will need a library that can generate a CSS based select box. Take a look at this.
I am using best_in_place gem which is awesome for inplace editing in rails apps.
But the problem with my implementation is the area that is defined as best in place wraps only around the text and so due to which there is some kind of wobbling[1] effect if I try to edit some desired field. So is there any way where in I can make the fixed text_area size so that it stays with the width that I want.
[1] By wobbling I mean when I click on the field i.e., when the field is focus it is of some width and when I tab-out it goes to default wrapper size.
The key is defining the inner class, rather than just the class. As in:
user/show.html.erb:
<%= best_in_place #user, :name, :inner_class => "css_class" %>
custom.css:
.css_class {
background:red;
}
Not sure if this helps, but I had kind of similar problem (same problem but with the text field), and this is how I've resolved it:
First add class to the best_in_place field:
<%= best_in_place #your_variable, :name, { :classes => "input_field" } %>
(I work with best_in_place 2.1.0, for older version you would need to depend on the id of the field, which seems to be unique)
Then apply styling to the input child of the class in your css:
.input_field input {
width: 400px;
}
and that should do it.
I have a text_area that is showing up with a height that is too large.
I am using simple form and I have read their documentation, but am still unclear on how to apply a css class to a text_area.
My form:
<div class="field">
<p>What's on your mind?</p>
<%= f.text_area :content, :wrapper_html => { :class => 'height-100px' }, placeholder: "Thought leads to action..." %>
</div>
My css:
.height-100px {
height:100px;
}
When I apply CSS to a div surrounding the input field it truncates the height, but inserts a scrollbar. Clearly, I am not applying the right css in that case.
I think this is an easy question to answer, but let me know. Thanks!
I ended up applying the class name "mf" to the section and using the generic "textarea" element to style all textareas on the site using this:
.mf {
textarea {
height:50px;
}
}
Would have been nice to apply the class name directly on the simpleform element, but it would not work for me...