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' }
Related
I am using ReactJS with redux.
I using scss.
lets say my path is:
http://localhost:3000/login
I need to add to this page:
html:{ overflow:hidden}
and on other pages i want to remove this attribute.
Anyone have a clue?
You can change the style attribute of the html tag:
class MyPage extends React.Component {
componentWillMount() {
this.htmlTag = document.getElementsByTagName('html')[0];
this.htmlTag.setAttribute('style', 'overflow: hidden');
}
componentWillUnmount() {
this.htmlTag.setAttribute('style', '');
}
...
}
I don't know how is your project architecture, but you can add a class (className) into your HTML tag in differently ways.
If you want, you can also use your redux state.
You check if you are in X page, if it's ok, pass a boolean at true and if it's true, put your css.
I prefer the first solution.
You could just import a className, let's say loginStyle, and make it so:
html: {
overflow: hidden;
}
Then, you just put it as a condition let's say on your header (has to be an element present in every page).
Something like
const isLogin = window.location.pathname === login ? true : false ( <= this is not the real condition, but make it so isLogin equals true is you are on your login page).
<Header className={${className1} ${className2} ${isLogin ? loginStyle : ' '}}/>
And your style will only be applied on your login page. Maybe not the simpliest, but at least this would work :)
i am having a datetime field in my table, in user view to select the date time i am using datetime_select view helper. i want to style this with bootstrap classes and i don't want the default date format that it is showing. how can i format this date time select and how can i style this field?
this is the code i am using now.
<%= f.datetime_select :check_out_req , ampm: true , :class => "form-control"%>
it's displaying datetime select drop downs in the format year,month, date,hours, minutes. but i want it to display the dropdowns in the format day,month,year,hours,minutes .
and when i apply styling like this :class => "form-control" the styling is not applyig. how to style this field?
The datetime_select method has two hashes, one for options and one for html_options. You need to tell Ruby explicitly which keys belong to which hash. Since ampm belongs in the options hash and class belongs in the html_options hash, you need to separate the hashes. In addition, if you want to re-order the drop downs, provide the order option:
<%= f.datetime_select :check_out_req, { ampm: true, order: [:day, :month, :year] }, { class: "form-control" } %>
Easily insert your datetime select field inside a span element and assign a CSS class to it. Take this snippet as an example;
HTML:
<span class="datetime"><%= f.datetime_select :check_out_req , ampm: true , :class => "form-control"%><span/>
CSS:
.datetime select:nth-child(1) {
width: 130px;
text-indent: 15px;
}
You can change the order by passing order parameter.
example:
date_select("article", "written_on", order: [:day, :month, :year])
for more detail please refer the the link:
http://apidock.com/rails/ActionView/Helpers/DateHelper/date_select
I am using a form builder in ruby(1.9.3) rails(3.1.3) inside a modal. I want to put the 'bulk' of the form inside the body and the submit button inside the footer. However, the footer is outside the scope of the form builder. What is the best option to accomplish this? Use funky CSS tricks to make it appear that way? or is there a more elegant solution?
= form_for #review, remote: true do |f|
.control-group
.controls
= f.hidden_field :rating, value: #review.rating
- 5.times do |i|
.office_rate.active_rate{ class: "rate_#{i+1}", data: {rate: i+1}}
.control-group
%label.control-label Review Title
.controls
= f.text_field :title, class: 'span5', title: "review title"
.control-group
%label.control-label Message
.controls
= f.text_area :message, class: 'span5', rows: 5, title: "message"
%hr{style:'align:left;'}
= f.hidden_field :date, value: Time.now
= f.submit 'Submit Your Review', class: 'btn btn-info'
You really only have three choices: submit the form using javascript, expand the scope of your form, or resort to the aforementioned funky CSS tricks. I would try really hard to just have a more conventional approach, but would lean toward the js submission, if I had to. You could always use the funky CSS tricks, if you need a non-js fallback...
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 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.