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>
Related
I'm currently trying to implement an select_tag, the problem I'm facing is that every css element works, except the select option. Somehow the bootstrap stylesheet gets called when I use f.select :home_type, [["Room", "Room"]], class: 'add-listing__input'
This stylesheet gets called and only select works
http://localhost:3000/assets/triptip-assets.min.self-3157b4719675b23587e706840e28dab5a7506a2794b67521ade419a505a34070.css?body=1
When I use for example f.text_field everything works and this stylesheet gets called
http://localhost:3000/assets/style.self-6fdbeaf8dfea504b6f923ccefbf5f6a7f370c6436cf98feefac201fc92c78f83.css?body=1
EDIT
Here is my form
<%= form_for #room do |f| %>
<div class="add-listing__form-content">
<div class="row">
<div class="col-md-6">
<label class="add-listing__label">
Home Type:
</label>
<%= f.select :home_type, [["Wohngebäude", "Wohngebäude"], ["Bürogebäude", "Bürogebäude"], ["Haus", "Haus"], ["Geschäft", "Geschäft"]], class: 'add-listing__input js-example-basic-multiple' %>
</div>
<div class="col-md-6">
<label class="add-listing__label">
Vacancy Type:
</label>
<%= f.select :vacancy_type, [["Leer", "Leer"], ["Voll", "Voll"]], class: 'add-listing__input js-example-basic-multiple' %>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="add-listing__label">
Accomodate:
</label>
<%= f.number_field :accomodate, id: "amount", placeholder: "Für wie viele Personen?", class: "add-listing__input" %>
</div>
<div class="col-md-6">
<label class="add-listing__label">
Abrissgerüchte:
</label>
<%= f.text_field :rumors, id: "rumors", placeholder: "Abrissgerüchte?", class: "add-listing__input" %>
</div>
</div>
</div>
<% end %>
You should define class in select field in this way:
<%= f.select(:vacancy_type, [ ... ], {}, { class: 'my_style_class' }) %>
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 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>
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 building a layout for my login page and am having problem getting my buttons to line up. I have used a custom class to center my username and password form, and would now like to have 2 equal sized buttons for log in and sign up underneath them. I tried achieving this with col that are half size of the parent, but so far they are just sized the same. Any help on what I'm doing wrong is appreciated.
html:
<div class="col-xs-4 centered">
<%= form_tag sessions_path do %>
<div class="form-group">
<%= label_tag :email %>
<%= text_field_tag :email, params[:email], class:'form-control' %><br/>
<%= label_tag :password %>
<%= password_field_tag :password, nil, class:'form-control' %><br/>
<div class="col xs-2">
<%= submit_tag "Log in", class:'btn btn-primary btnstyle' %>
</div>
<div class="col xs-2">
<%= link_to 'Sign Up', new_user_path, class:'btn btn-primary btnstyle' %>
</div>
<% end %>
</div>
</div>
css:
.btnstyle {
width:100%;
}
.centered {
float: none;
margin: 0 auto;
}
I tried to set up a fiddle, but ofc it won't work with rails tags...
figured it out, had a - missing and had to post them outside of the main col with an offset to center. Here's the final result:
<div class="col-xs-4 centered">
<%= form_tag sessions_path do %>
<div class="form-group">
<%= label_tag :email %>
<%= text_field_tag :email, params[:email], class:'form-control' %><br/>
<%= label_tag :password %>
<%= password_field_tag :password, nil, class:'form-control' %><br/>
</div>
</div>
<div class="col-xs-2 col-xs-offset-4">
<%= submit_tag "Log in", class:'btn btn-primary btnstyle' %>
</div>
<div class="col-xs-2">
<%= link_to 'Sign Up', new_user_path, class:'btn btn-primary btnstyle' %>
</div>
<% end %>
</div>