I received the code below of a simple_form for a multiple choice question's answers.
<%= simple_form_for :sent_activity, url: sent_activities_path(class_activity_id: #activity.id), method: :post do |f| %>
<div class="flex-col inline-block items-center mr-4 my-5">
<%= f.input :kind, as: :hidden, input_html: { value: "multiple_choice" } %>
<%= f.collection_radio_buttons :multiple_choice_answer, #activity.options, :last, :first do |b| %>
<div class="flex items-center mb-4">
<span class="flex items-center cursor-pointer text-md">
<%= b.label { b.radio_button + b.text } %>
</span>
</div>
<% end %>
</div>
<div>
<%= f.submit "Enviar", class: "bg-pink text-white font-bold py-2 px-4 rounded-lg" %>
<% end %>
Now, I have to style the radio button and text inside the following line:
<%= b.label { b.radio_button + b.text } %>
But I can't seem to find the proper syntax to style each of the components (the button and the text). For example, I want to insert some space between the button and the text but I didn't managed to do it inline.
I thought about styling the radio_button input in the css file but the problem is: there is already a style for this element that applies on another part of the application that is different from the one I should implement here.
What would be the best way to do it?
Is there a way to do it inline?
Thank you for your help!
The best way to style the radio button and the text inline is by using the label_html option for SimpleForm's collection_radio_buttons method. You can pass HTML attributes to the label_html option which allows you to style your radio button and text as you require. For example, if you wanted to add a margin between each radio button and its corresponding text, you could achieve this like this:
<%= f.collection_radio_buttons :multiple_choice_answer, #activity.options, :last, :first, label_html: { class: "margin-right-1" } do |b| %>
<div class="flex items-center mb-4">
<span class="flex items-center cursor-pointer text-md">
<%= b.label { b.radio_button + b.text } %>
</span>
</div>
< % end % >
Then, in your CSS file, you can define the margin-right-1 class:
.margin-right-1 {margin-right: 1rem;}
Related
I need to add a button that persists the data of the following form but that when pressing it resets the view and stays in it, without redirecting to the index of the controller, I have tried an ajax call but I don't know why it didn't work for me.
How can I give a solution and add the button to save and continue?
<%= turbo_frame_tag dom_id(taxonomy) do %>
<%= form_with(model: [:admin, taxonomy], id: dom_id(taxonomy)) do |form| %>
<div class="box">
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<div class="control is-expanded is-relative">
<%= form.text_field :name, placeholder: true, class: "input mt-5" %>
<%= form.label :name, class: "label-hidden required" %>
</div>
</div>
<div class="field is-narrow">
<div class="control mt-5">
<%= form.submit nil, class: "button is-primary" %>
<%= link_to "#{ t '.cancel'}", admin_taxonomies_path, class: "button is-light" %>
</div>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
You need to add a target="_top" attribute to the frame: turbo_frame_tag dom_id(taxonomy), target: :_top
Otherwise Turbo tries to replace the current frame containing the form.
You can also just add data-turbo="false" on your link and the redirection will be working fine.
More info here in the documentation
https://turbo.hotwired.dev/handbook/drive#disabling-turbo-drive-on-specific-links-or-forms
Simple_form
<%= simple_form_for(#book, wrapper: :horizontal_form, wrapper_mappings: {
}, html: { class: 'form-horizontal' }) do |f| %>
<%= f.error_notification %>
<div class="image-upload">
<%= f.input :book_cover, as: :file , input_html: { class: 'fa fa-cloud-download'}%>
</div>
<%= f.input :category_id, collection: #categories, prompt: 'Select a category' %>
<%= f.input :author %>
<%= f.input :description %>
<div class="d-flex">
<div class="ml-auto">
<%= f.button :submit %>
<%= f.button :cancel, to: books_path %>
</div>
</div>
<% end %>
This is my simple_form form. I want the f.input :book_cover to be displayed as the icon fa fa-cloud-download without the normal download button.
CSS.
.image-upload > input {
display: none;
}
Ive got another form working with it (this is just a snippet of a regular form_for resource:
<%= f.form_group :avatar, class: "row" do |f| %>
<%= f.label :avatar, class: "col-sm-4 col-form-label" %>
<div class="col-md-8">
<label class="image-upload form-control">
<i class="fa fa-cloud-download"></i>
<% if #user.avatar.present? %> <%= #user.avatar_file_name %>
<% end %>
<%= f.file_field :avatar %>
<%= f.error_messages %>
</label>
</div>
<% end %>
Can't seem to get my simple_form working with just the icon.
Edit: Uploading a image to show what my problem is and what it should look like
picture
should look like this
SimpleForm has a input_field method that you can use instead input to render only the actual input element, without wrapper div and label. That helps if you want to build more complex structures manually.
<label class="col-sm-4 col-form-label">Book cover</label>
<div class="col-md-8">
<label class="image-upload form-control">
<i class="fa fa-cloud-download"></i>
<%= f.input_field :book_cover %>
<%= f.error_messages %>
</label>
</div>
I've the following form that uses Simple_form gem:
<%= simple_form_for #match_prediction do |f| %>
<%= f.input :outcome, label: false, as: :radio_buttons, collection: [['local', match.local_team], ['Tie', 'Tie'], ['visit', match.visiting_team]], label_method: :second, value_method: :first %>
<%= f.submit 'Save' %>
<% end %>
Currently it works as expected, meaning: Renders 3 radio buttons, exclusive from each other and each resulting in a unique string being passed to the server.
The problem: I'd like to separate each of the radio buttons across different columns in a Bootstrap grid like below:
<div class="row prediction">
<div class="col-sm-4">
<!-- FIRST RADIO BUTTON HERE -->
</div>
<div class="col-sm-4">
<!-- SECOND RADIO BUTTON HERE -->
</div>
<div class="col-sm-4">
<!-- THIRD RADIO BUTTON HERE -->
</div>
<%= f.submit 'Save' %>
</div>
Since the whole collection is specified in one line within the form code, I can't simply split lines and insert them in the relevant HTML.
Is there a way to achieve this either via simple_form or vanilla rails form helpers?
I've considered splitting the radios as separate form inputs but this would allow to select more that one option at once. I'd appreciate your help.
Coudn't you use a standard rails helper in simple_form form? What about using the radio_button helper directly. Docs
<div class="row prediction">
<div class="col-sm-4">
<%= radio_button 'match_prediction', 'outcome', 'local', checked: #match_prediction.outcome == 'local' %> <%= match.local_team %>
</div>
<div class="col-sm-4">
<%= radio_button 'match_prediction', 'outcome', 'Tie', checked: #match_prediction.outcome == 'Tie' %> <%= 'Tie' %>
</div>
<div class="col-sm-4">
<%= radio_button 'match_prediction', 'outcome', 'visit', checked: #match_prediction.outcome == 'visit' %> <%= match.visiting_team %>
</div>
<%= f.submit 'Save' %>
</div>
And if it is possible to access standard FormHelper in simple_form you can call:
<%= f.radio_button 'outcome', 'xzy' %> <%= 'whatever' %>
I have two models: Meal and Tag. They are associated by HABTM. What I want to do is to add new meal. So I have new.html where is name field, preparation field, and all tags (represented by toggle-buttons - every tag has own toggle-button). User can clicked tags, which want to save in this meal.
And here is a problem. I can display all tags, but I have no idea how can I tell rails to save only clicked tags.
Could you help me find right approach?
oh, and there is a user too (user has many meals), but I thing it doesn't matter.
Here is my view:
<%= form_for(#meal,:html => {:class => "meal-data-form"}) do |f| %>
<%= render 'shared/error_messages', object: f.object%>
<%= f.label :name, "Nazwa *" %>
<%= f.text_field :name, class: 'form-control'%>
<%= f.label :preparation, "Sposób przyrządzenia" %>
<%= f.text_area :preparation, class: 'form-control' %>
<h3>Określ tagi dla tego posiłku</h3>
<div id="tags-associated-with-meal">
<h4>Rodzaj posiłku</h4>
<div id="associated-nutrient-tags">
<% current_user.nutrient_tags.each do |nutrient_tag| %>
<button id="associated-type-tag-<%= nutrient_tag.id %>" type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
<%= nutrient_tag.name %>
</button>
<% end %>
</div>
</div>
<%= f.submit yield(:button_name), class: "btn btn-primary" %>
I would not use a toggle button to do this, I would probably use checkboxes.
This is what you would do if you used checkboxes:
<%= f.collection_check_boxes :nutrient_tags_ids, current_user.nutrient_tags, :id, :name do |b| %>
<div class="collection-check-box">
<%= b.check_box %>
<%= b.label %>
</div>
Here is something for reference: http://www.sitepoint.com/save-multiple-checkbox-values-database-rails/
And here is the Rails collection_check_boxes official documentation: http://apidock.com/rails/v4.0.2/ActionView/Helpers/FormOptionsHelper/collection_check_boxes
Hope that helps.
In BootStrap, I can use the following code to get a button with an icon.
<button class="btn btn-primary">
<span class="glyphicon glyphicon-search"></span> Click Me</button>
Now I want to do the same thing for the submit button of a Rails form. I don't know how to do it and below is my code:
<h1>Create a post</h1>
<%= form_for :post, url: posts_path do |f| %>
<div class="form-group">
<%= f.label :title %>
<%= f.text_field :title, class: "form-control" %>
<p class="help-block">Please type the title of the post</>
</div>
<div class="form-group">
<%= f.label :body %>
<%= f.text_area :body, class: "form-control", rows: 5 %>
<p class="help-block">Please type the body of the post</>
</div>
<%= f.submit class: "btn btn-primary" %>
<% end %>
Could someone give me any suggestions?
I found the solution here: HTML code inside buttons with simple_form
<%= button_tag(type: 'submit', class: "btn btn-primary") do %>
Text
<% end %>