I want ff.label to line up with ff.radio_button. But right now my view has them extremely far apart and not lined up. Why?
I've added a css tag to this question in case it's a problem with css and not rails just in case.
this is my code:
<%= form_for([#user, #submitted_quiz]) do |f| %>
<%= f.hidden_field :quiz_id, :value => #quiz.id %>
<%= f.hidden_field :name, :value => #quiz.name %>
<% #quiz.questions.each do |question| %>
<div class = "questions" >
<%= f.label question.content %>
<%= f.fields_for (:submitted_answers) do |ff| %>
<%= ff.hidden_field :question_id, :value => question.id %>
<div class = 'options'>
<% question.answers.each do |answer| %>
<div class = 'radio'>
<%= ff.radio_button :content, answer.content %>
<%= ff.label :content, answer.content %>
</div>
<% end #answer.each do %>
</div>
<% end #fields_for (:submitted_answers) do %>
</div>
<% end #questions.each do %>
<%= f.submit %>
<% end #form_for %>
Put your radio button inside your label and try.
<div class="radio">
<%= ff.label :content do %>
<%= ff.radio_button :content, answer.content %>
<%= answer.content %> <!-- this will make the text appear after the radio button -->
<% end %>
</div>
Update:
Like this
<label>
<input type="radio" ... />
Foo
</label>
Here Foo will appear right after the radio button not before.
Related
This is annoying because I feel like I have tried everything. My goal is to have a red ring around invalid input fields when the input is invalid. How do I target invalid input fields in rails 6. I am using a rails form which is generated by devise. I am also using tailwind css.
I have tried all of the following.
.invalid{
#apply ring-2 ring-red-700
}
.input:invalid{
#apply ring-2 ring-red-700
}
.input-group {
.invalid {
#apply ring-2 ring-red-700
}
}
Here is the form I am using to register users
<% content_for :devise_form do %>
<%= form_for(resource, as: resource_name, url: session_path(resource_name), :html => {:class => 'form-horizontal' }) do |f| %>
<div class="input-group">
<%= f.label :email %><br />
<%= f.email_field :email,
autofocus: true,
autocomplete: "email",
class: "input",
placeholder: "Your Email"%>
</div>
<div class="input-group">
<%= f.label :password %><br />
<%= f.password_field :password,
autocomplete: "current-password",
class: "input"%>
</div>
<% if devise_mapping.rememberable? %>
<div class="field">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<% end %>
<div class="input-group">
<%= f.submit "Log in", class: "btn btn-default loader" %>
</div>
<% end %>
<hr class="mt-6 border" />
<%= render "devise/shared/links" %>
<% end %>
<%= render "devise/shared/form_wrapper" %>
So how do I target fields whose input's are invalid?
I ended up using the developer tools in the browser. I inspected the element which is called input#user_password.invalid. So the long term solution is to use inspect elements.
#layer components {
.field_with_errors { #apply border-2 border-red-700}
}
This is my registration form which is using devise but for some reason, my CSS only affects the First_Name part and nothing else. On top of that, the First Name part looks slightly different from the other bars in terms of its border color. I did install bootstrap but I haven't had a problem like this on other pages so I don't think that's the issue.
<h2>Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="field input">
<%=f.label :First_Name%>
<%=f.text_field :fname, class:"form-control",:autofocus => true %>
</div>
<div class="field input">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
<div class="field input">
<%= f.label :password %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off" %>
</div>
<div class="field input">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<%= render "devise/shared/links" %>
<style>
.input{
width: 25%;
text-decoration: none;
}
</style>
You have to apply .form-control class to input fields for appling Bootstrap style.
In your code only first name (fname) has .form-control - You have to add it to other input fields as well.
Example for email field:
<%= f.email_field :email, autofocus: true, autocomplete: "email", class:"form-control" %>
I am building a form in Rails4. When I added divs for styling this form, the f.submit button stopped working. I have not changed the controller or the model. Code below. Thanks!
_form in the Plans View
<div class="sidebar-widget">
<div class="Pricing-box">
<div class="price-title spacing-box">
<h4>Create a New Plan</h4>
</div>
<hr>
<div class = "sidebar-form"
<%= form_for(plan) do |f| %>
<div class="name-field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
<div class="time-field">
<%= f.label :time %>
<%= f.time_field :time %>
</div>
<div class="date-field">
<%= f.label :date %>
<%= f.date_select :date %>
</div>
<div class="restaurant-field">
<%= f.label :restaurant %>
<%= f.collection_select :restaurant_id, Restaurant.all, :id, :name %>
</div>
</div>
<div class="spacing-grid">
<%= f.submit "Create Plan", class: 'btn btn-md btn-black'%>
<% end %>
</div>
</div>
From the Plans Controller: new, index and create actions
class PlansController < ApplicationController
def new
#plan = Plan.new
end
def create
#plan = Plan.create(plan_params)
#plan.users << current_user
redirect_to #plan
end
def index
#plans = Plan.all
#binding.pry
respond_to do |format|
format.html
format.js {}
end
end
From the Plans view, index.html.erb
<section class="ptb ptb-sm-50">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 mt-xs-30">
<%= render "plans/form", {plan: Plan.new } %>
<%= render "plans/all_plans", {plans: #plans} %>
</div>
</div>
</div>
</section>
Try modifying your form_for tag so that it looks like this:
<%= form_for #plan, url: {action: "create"} do |f| %>
This is the syntax that the Rails guide recommends - not sure if this will solve your problem or not.
I'm a newbie here but I have yet to find any answers. My f.text_area :summary portion of my form is being pushed to the right and above the rest of my form and I can't correct it. I want it to be positioned inline below "topic". I've tried a number of different methods to correct the issue to no avail. Code below. Thanks. I'm using devise and bootstrap.
<div class="container new-pit">
<div class="panel-heading new-pit">Sign Up</div>
<%= render 'devise/shared/error_messages', obj: #pit %>
<%= simple_form_for(#pit) do |f| %>
<div class="panel-body new-pit">
<div class="form-group new-pit">
<%= f.label :topic %>
<%= f.text_field :topic %>
<%= f.label :summary %>
<%= f.text_area :summary %>
<h5>Upload Image</h5>
<%= f.file_field :image %>
<%= f.label :video %>
<%= f.text_field :video_url %></div>
<div class="form-actions">
<%= f.submit "Start Pit" %>
</div>
</div>
</div>
</div>
I'm using the following code to produce a form. Currently, there is no styling what so ever and all the CSS files are empty.
<h1>New Post</h1>
<%= form_for #post do |f| %>
<%= f.text_field :title %>
<%= f.text_area :body %>
<%= f.submit %>
<% end %>
This is the contents of the application.rb
<!DOCTYPE html>
<html>
<head>
<title>Bloog</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="sidebar two columns">
<nav>
<ul>
<li><%= link_to "New post...", new_post_path %></li>
</ul>
</nav>
</div>
<div>
<%= yield %>
</div>
</body>
</html>
This produces a form that is aligned horizontally instead of stacking the elements vertically.
What I would like it to look like is this, which was the default behaviour that I was expecting.
Add some boxing to the elements to group them. Divs or paragraphs for example, just as it is done in default scaffolding.
Use it like this:
<h1>New Post</h1>
<%= form_for #post do |f| %>
<p><%= f.text_field :title %></p>
<p><%= f.text_area :body %></p>
<p><%= f.submit %></p>
<% end %>