i'm trying to style a form to have the following layout:
[DateBegin] [DateEnd]
.Input field. .Input field.
Is this possible with RoR? If so how do I do it, I tried with but clearly that didn't work, do I have to style it with divs? I'm using bootstrap, if there is a good bootstrap solution I'd like to know aswell, help/ideas appreciated
below is sample view for your requested format, field are date_begin and date_end
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<%= f.label :date_begin,"Label for Date begin" %>
<%= f.text_field :date_begin, :class => 'form-control' %>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<%= f.label :date_end,"label for date end" %>
<%= f.text_field :date_end, :class => 'form-control' %>
</div>
</div>
</div>
Related
I've tried a lot of research and tinkering and I just can't get my Rails view to format a form with Bootstrap or CSS. I know that the Bootstrap classes could be affecting it or the CSS.
What I'm trying to do is just create a two column, side by side container. With an image in one column next to the form in the other. Both the same size.
I've tried the expected and researched:
Container with row with two columns. One column as the form and the second column as the image.
Instead the form is acting like it is fluid and taking up the entire page width and the columns are stacking vertically, instead of side by side.
I want it took look like this:
<div class="container d-flex">
<div class="row">
<div class="col">
<%= form_with(model: car, local: true) do |form| %>
<%= hidden_field_tag "car[login]", exists ? "#{#car.login}" : "#{#current_user.login}" %>
<div class="field">
<%= form.label :model, class: "h3" %><br>
<%= form.text_field :model, id: :car_model, class: "form-control mb-2 mr-sm-2 mb-sm-0" %>
</div>
<div class="field">
<%= form.label :year, class: "h3" %><br>
<%= form.number_field :year, id: :car_year, class: "form-control mb-2 mr-sm-2 mb-sm-0" %>
</div>
<div class="field">
<%= form.label :color, class: "h3" %><br>
<%= form.text_field :color, id: :car_color, class: "form-control mb-2 mr-sm-2 mb-sm-0" %>
</div>
<div class="field">
<%= form.label :licence_plate, class: "h3" %><br>
<%= form.text_field :licence_plate, id: :car_licence_plate, class: "form-control mb-2 mr-sm-2 mb-sm-0" %>
</div>
<div class="actions">
<%= form.button "<h3>#{submit_text}</h3>".html_safe, class: "btn btn-success btn-sm" %>
</div>
<% end %>
<div class="col">
# img source here
</div>
</div>
</div>
</div>
Usually, for bootstrap forms, your label and input should be wrapped by a .form-group element, not a .field one.
https://getbootstrap.com/docs/4.0/components/forms/
Do something like:
<div class="form-group field">
<%= form.label :licence_plate, class: "h3" %><br>
<%= form.text_field :licence_plate, id: :car_licence_plate, class: "form-control mb-2 mr-sm-2 mb-sm-0" %>
</div>
I am losing my mind, whatever I do my layouts keeps doing weird things.
I have a simple form code:
<div class="center jumbotron">
<%= form_for(#user, url: signup_path) do |f| %>
<%= render 'shared/error_messages' %>
<%= f.label t(:email) %>
<%= f.text_field :email, class: 'form-control' %>
<%= f.label t(:password) %>
<%= f.password_field :password, class: 'form-control' %>
<%= f.label t(:first_name) %>
<%= f.text_field :first_name, class: 'form-control' %>
<%= f.label t(:last_name) %>
<%= f.text_field :last_name, class: 'form-control' %>
<%= f.label t(:student_id) %>
<%= f.text_field :student_id, class: 'form-control' %>
<%= f.submit t(:sign_up_button), class: 'btn btn-lg btn-primary' %>
<% end %>
</div>
Which looks like
All I want to do is reduce width of inputs to about 25% (or 3 cols) while keeping responsive layout.
For example, when I try to wrap whole form in div with form-control class, then wrap every input+label in div with row class and another div with col-xs-3 class, inputs become inline and scale instead of placing one under another.
I expect that you probably were doing it correctly but you need to give each of the columns an offset so that it doesn't make each of them inline and use rows. See the bootstrap documentation here: http://getbootstrap.com/css/#grid-offsetting
It should probably look like
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= f.label t(:email) %>
<%= f.text_field :email, class: 'form-control' %>
</div>
</div>
etc...
You can Try this Code for one element in your form
<div class="OneFormElement">
<div class="row">
<div Class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<%= f.label t(:email) %>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<%= f.text_field :email, class: 'form-control' %>
</div>
</div>
</div>
Full answer is #Kasunjith And #Stephen answer's combined.
#Kasunjith 's answer granted proper placement and #Stephen 's made sure that it's responsive on all devices.
Final code looks like this:
<div class="center jumbotron">
<%= form_for(#user, url: signup_path) do |f| %>
<%= render 'shared/error_messages' %>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
<%= f.label t(:email) %>
<%= f.text_field :email, class: 'form-control' %>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
<%= f.label t(:password) %>
<%= f.password_field :password, class: 'form-control' %>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
<%= f.label t(:first_name) %>
<%= f.text_field :first_name, class: 'form-control' %>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
<%= f.label t(:last_name) %>
<%= f.text_field :last_name, class: 'form-control' %>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
<%= f.label t(:student_id) %>
<%= f.text_field :student_id, class: 'form-control' %>
</div>
</div>
<%= f.submit t(:sign_up_button), class: 'btn btn-lg btn-primary' %>
<% end %>
</div>
Here is the link to Bootstrap documentation. custom column sizing
From the documentation:
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Your code can be rewritten as follows
<div class="center jumbotron">
<%= form_for(#user, url: signup_path) do |f| %>
<%= render 'shared/error_messages' %>
<div class="row">
<div class="col-md-3"> <!-- this can be changed as per your requirement -->
<%= f.label t(:email) %>
<%= f.text_field :email, class: 'form-control' %>
</div>
<div class="col-md-3">
<%= f.label t(:password) %>
<%= f.password_field :password, class: 'form-control' %>
</div>
</div>
<%= f.submit t(:sign_up_button), class: 'btn btn-lg btn-primary' %>
<% end %>
</div>
I'm using simple_form in my rails 4.2 project. I'm having some trouble with the row/field alignment following a validate with the error display. Any field that validates does not vertically align with the failed validated fields.
<%= simple_form_for(#creditrequest) do |f| %>
<%= f.error_notification %>
<br>
<div class="form-actions creditrequest_form">
<div class="row row-centered">
<div class="col-sm-2 col-centered">
<%= f.input :account, as: :string, label: "Account #", placeholder: "000-012345" %>
</div>
<div class="col-sm-2 col-centered">
<%= f.input :gldsname, label: "GLDS Name", placeholder: "Bob Wehadababyitsaboy" %>
</div>
<div class="col-sm-2 col-centered">
<%= f.input :contact_no, label: "Contact No", placeholder: "(989) 555-1212" %>
</div>
</div>
<div class="row row-centered">
<div class="col-sm-2 col-centered">
<%= f.input :credit_amount, as: :string, label: "Credit Amount", placeholder: "$", class: "textarea_oneline" %>
</div>
<div class="col-sm-2 col-centered">
<%= f.input :package, placeholder: "PLV" %>
</div>
<div class="col-sm-2 col-centered">
<%= f.input :reason, placeholder: "Credit for Service Issue" %>
</div>
</div>
<div class="row row-centered">
<div class="col-sm-6 col-centered">
<%= f.input :detail, as: :text, label: "Why are we issuing a credit?" %>
</div>
</div>
<div class="row row-centered">
<div class="col-sm-6 col-centered">
<%= f.input :tech, placeholder: "AN" %>
<br>
<br>
<%= f.button :submit, "Submit", class: "btn btn-custom" %>
</div>
</div>
</div>
<% end %>
At all Simple Form is not source of this problem. The problem is you styles, and you need first set line height and vertical alignment for you blocks:
.form-actions.creditrequest_form {
> .row.row-centered {
line-height: %{Parent-value}px;
> .col-sm-2.col-centered {
display: inline-block; /* can use vertical alignment */
vertical-align: top; /* pull all to top */
line-heigth: %{child-value}px;
}
}
}
Update: Consider that .error is added on error and it can add not right styles.
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 trying to make a form with bootstrap-sass. I need to find the optimal configuration of bootstrap classes to make it look nice. It is not showing up the way I expect, specifically when the browser width is smaller than a certain size the spaces between labels and form fields collapse and it doesn't look good anymore. It would be ok if it only happens on small width, but that's not the case.
I would really appreciate some help with this,
really, what is the best way to format the form-horizontal with bootstrap?
Here's my code:
<form class="form-horizontal center" role="form">
<%= form_for #user do |f| %>
<div class="field">
<%= f.label :fname, "First name:", class: "col-md-4 control-label" %>
<%= f.text_field :fname %>
</div>
<div class="field">
<%= f.label :lname, "Last name:", class: "col-md-4 control-label" %>
<%= f.text_field :lname %>
</div>
<div class="field">
<%= f.label :email, "Email:", class: "col-md-4 control-label" %>
<%= f.text_field :email %>
</div>
<!--div class="form-group" -->
<div class="field">
<%= f.label :comments, "Comments:", class: "col-md-4 control-label" %>
<%= f.text_field :comments %>
</div>
<div class="field">
<%= f.radio_button :attend, 'yes', :checked => true, class: "col-md-4 control-label" %>
<%= f.label :attend, 'I will attend.', :value => "yes" %><br />
<%= f.radio_button :attend, 'no', :checked => false, class: "col-md-4 control-label" %>
<%= f.label :attend, "I will not attend.", :value => "no" %>
</div>
<div class="field">
<%= f.check_box :workshop, class: "col-md-4 control-label" %>
<%= f.label :workshop, "Checkbox Description" %>
</div>
<div class="field">
<div class="col-md-4">
<%= f.submit "Submit", class: "btn btn-default btn-primary" %>
</div>
</div>
<% end %>
</form>
As you can see from commented out code, I first used form-group class, but it wasn't working well.
Again, the problem is that spaces between labels and text fields collapse when width of the browser is less than certain size. The labels, which are right-aligned, lose their alignment. Browser has to be almost full screen to show up correctly, which isn't right because there's plenty of space for it to show up correctly on smaller width.
I was following this guide http://getbootstrap.com/css/#grid
Edit: Added email field in the code, because it's of different size and easier to see the problem.
take a look at bootstrap v3 doc here http://getbootstrap.com/css/#forms-horizontal
and you don't need to add form tag since you are already using form_for
<%= form_for #user, :html => {:class => "form-horizontal center"} do |f| %>
<div class="form-group">
<%= f.label :fname, "First name:", class: "col-md-4 control-label" %>
<div class="col-md-8">
<%= f.text_field :fname, class: "form-control" %>
</div>
</div>
<div class="form-group">
<%= f.label :lname, "Last name:", class: "col-md-4 control-label" %>
<div class="col-md-8">
<%= f.text_field :lname, class: "form-control" %>
</div>
</div>
<div class="form-group">
<%= f.label :comments, "Comments:", class: "col-md-4 control-label" %>
<div class="col-md-8">
<%= f.text_field :comments, class: "form-control" %>
</div>
</div>
<div class="radio">
<%= f.radio_button :attend, 'yes', :checked => true %> I will attend.
<br />
<%= f.radio_button :attend, 'no', :checked => false %> I will not attend.
</div>
<div class="checkbox">
<%= f.check_box :workshop %> Checkbox Description
</div>
<%= f.submit "Submit", class: "btn btn-default btn-primary" %>
<% end %>