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.
Related
I'm working on a rails form in which I have multiples options to ask for a customer. Of which one has multiple options to select from. I was able to have the list of options generated through a collection, however my problem is that I would like the list to stretch out the entire width of the container it is located in. No matter what I try, I'm not able to get anything within it to respond. What is happening is I continue to get the default styles that come with the inputs. I was wondering if anyone could take a look and help me with this situation.
= f.input :recognition, class: "recognitionStyling", collection: %w{article, blog_post, linkedin, magazine_ad, online_search, referral, twitter, other}, required: false
.recognitionStyling{
width: 100%;
}
Since you use Simple Form, you should pass your css class name into input_html options if you want set class to input:
= f.input :recognition, input_html: { class: 'recognitionStyling' }
If you want to set css class to label:
= f.input :recognition, label_html: { class: 'recognitionStyling' }
If you want to wrap both your input and label (set css class to default Simple Form wrapper):
= f.input :recognition, wrapper_html: { class: 'recognitionStyling' }
I've been using the mailboxer gem. One of teh views users a helper method to create a title
<% page_header "Start Conversation" %>
This helper method is defined in application_helper.rb
def page_header(text)
content_for(:page_header) { text.to_s }
end
I am also using the gem bootstrap-sass (latest version)
The html result is
<div class="line"><% page_header "Start Conversation" %>
I want to reduce the font size of the div rendered by page_header but I don't know how. Can anyone help?
You can add class option to your content_for
def page_header(text)
content_for(:page_header, text.to_s, class: 'small-font-size')
end
Then in your css file add
div.small-font-size{
font-size: 9px;
}
#Nermin's approach is better, but it's worth mentioning that you can also use the style attribute to set specific properties on an element:
def page_header(text)
content_for(:page_header, text.to_s, style: 'font-size: 9px;')
end
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 have looked around but I can't find a lead on what I need to do to make the following possible:
This question assumes I have all model controllers working properly and the named CSS attributes are defined in the default stylesheet.
I am wanting users to be able to select a few CSS attributes to personalize their own theme when they login. The basics attributes would be the "body" and "page-wrapper" colour. (foreground)
I am wanting them to be able to select these attributes (from a form?) in the user's edit page. (which is already created)
Any ideas as to how I could make this work or a good lead in the right direction?
Thanks for your help.
I think the best approach is via javascript, generating an style tag on the head with the desired styles. Jquery gives a simple way to do that, and you can store the styles on a column in your model.
Something like this:
class User
attr_accesible :styles
view.erb
<script>
// Assume the #styles attr has something like "body { background-color: #567;}"
$('head').append($('<style>').html('<%= #user.styles %>'))
</script>
#styles will be another column in your model, so you should add it with a migration
rails g migration addstylestousers styles:string
in your form.erb
<%= f.label :styles %>
<%= f.text_field :styles %>
I think it's simple enough for the user to put the css style here as long as you give him enough tips like "add body { background-color: red } in this field to make you background red!".
About serialization, consider this.
If you want to nest the styles, then the script will be
//Lets say that the user stored on #bgcolor and #fgcolor only css color codes, like '#222' or 'blue'
var bgc = '<%= #user.style.bgcolor %>'
var fgc = '<%= #user.style.fgcolor %>'
var style = 'body { background-color: ' + bgc + '; foreground-color: ' + fgc + ' }'
$('head').append($('<style>').html(style))
Remember that relationship should be User has_one :style on this case. However, nesting it's getting yourself into more problem, I don't think it's worth it at all.
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...