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...
Related
rails 6
bootstrap
simple_form
I have a views/books/index.html/slim, as follows:
#BooksIndex
table.table.table-striped.table-hover
thead
tr.d-flex
th.col-10
= t('books.name')
th.col-1
th.col-1
tbody
- #Books.each do |Book|
tr.d-flex
td.col-sm-10 = Book.name
td.col-sm-1 = link_to edit_Book_path(Book)
i.fas.fa-edit.fa-lg
td.col-sm-1 = link_to Book, data: { confirm: t('are_you_sure') }, method: :delete
i.fas.fa-trash-alt.fa-lg
#AddBookForm
= simple_form_for(#Book || Book.new) do |f|
.form-inputs
= f.input :name, placeholder: t('Books.views.index.enter_name_of_Book_you_like_to_add'), label:false
span.form-actions
button.btn.btn-primary type="submit"
= "Create Book"
The #AddBookForm produces the following view:
When I submit, it produces the following:
Started POST "/Books" for 127.0.0.1 at 2020-03-12 12:46:44 -0700
Processing by BooksController#create as HTML
Parameters: {"authenticity_token"=>"....", "Book"=>{"name"=>"Fun"}}
I would like to have the Submit button, at the end of the text input field, like this:
I tried different variations of span, and using columns, but it's always showing up on the next line. Any ideas?
This is actually more of a bootstrap question, but here it goes
= simple_form_for(#Book || Book.new), html: { class: "form-inline" } do |f|
= f.input :name, placeholder: t('Books.views.index.enter_name_of_Book_you_like_to_add'), class: "form-control", label_html: { class: "mr-2"}
button.btn.btn-primary.ml-2 type="submit"
= "Create Book"
I added the label_html property so you can specify the label tag since that part is supposed to be shown according to your expected result.
Check the syntax, since I'm used to haml. but if you want the codepen to see how it looks check this:
https://codepen.io/jean182/pen/ZEGxWQB
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 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 the following code on my app:
<%= link_to (image_tag (attraction.image_url), id: "thumb_size2") + attraction.name, attraction_path(attraction) do %><%end%>
It results on a hyperlinked image formatted according to properties set in #thumb_size2 CSS.
attraction.name, however, has no style attached to it and thus just "floats" around the page. Ideally, I'd like #thumb_size2 CSS to also be applied toattraction.name.
I have searched previous questions posted with "link_to image_tag with text in rails" but none of the answers so far have worked (at least 6 of them)
Any suggestions how can this be achieved?
link_to (image_tag (attraction.image_url), id: "thumb_size2", :class => 'write css class name here') + attraction.name, attraction_path(attraction) do %><%end%>
you can add your class name in which you have defined the css
Make sure to remove the space between ( & link_to/ ( & image_tag. Also, include the id within image_tag as below: -
<%= link_to(image_tag(attraction.image_url, id: "thumb_size2"))
I faced the problem and i just got it fixed.
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;
}
}