Trying to get my checkboxes to line up horizontally instead of vertically and I'm having no luck here. The checkboxes and labels are stacking up next to each other as opposed to creating a new line each time.
<div class="form-group">
<%= f.label :phases, class: "col-sm-3 control-label" %>
<div class="col-sm-8">
<%= f.collection_check_boxes :phases, phases, :first, :first %>
</div>
</div>
My form class is form-horizontal and everything else looks fine.
Any suggestions would be greatly appreciated. Thanks!
Add a checkbox-inline class to the label and you are good to go.
<div class="form-group">
<%= f.label :phases, class: "checkbox-inline" %>
<div class="col-sm-8">
<%= f.collection_check_boxes :phases, phases, :first, :first %>
</div>
</div>
From the Bootstrap Wiki
Use the .checkbox-inline or .radio-inline classes on a series of
checkboxes or radios for controls that appear on the same line.
Related
I am attempting to create a messaging page on which the text box will sit on the bottom of the page and the messages will be displayed above it. Here is my code for the page:
<div class="ui">
<% #messages.each do |message| %>
<% if message.body %>
<% user = User.find(message.user_id) %>
<div class="item mt-3">
<div class="list">
<div class="item">
<strong><%= user.first_name %></strong>
<div class="content">
<%= simple_format(message.body) %>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
<%= form_for [#conversation, #message], html: {class: "ui reply form"}, remote: true do|f| %>
<%= f.text_area :body, class: "message-box", id: "message-form"%>
<button type="submit", class="send-button", style="display: inline">
<i class="nav-link fa fa-paper-plane"></i>
</button>
<%= f.text_field :user_id, value: current_user.id, type: "hidden" %>
<% end %>
</div>
</div>
The problem is that this code displays like this
The text is running under the text box. My instinct is to place the messages and the text box into two separate boxes and restrict the height of the top one, but I have been attempting this to no avail.
Can anybody suggest how I might be able to get this done?
You should place both in different div's and add 'max-height' to where the text displays.
Also Im assuming this is happening because the text input field is position with position:absolute.
You can make both position:relative and make both display:block. If you want to align the input at the bottom of the screen just use vertical-align
I also think you need to add some custom css styles to the div containing message. Like max-height: 100px and overflow-y: auto;
It would be easier to help you if you could provide fully rendered html instead of a template.
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>
How can we get these two to appear on the same line?
I've tried everything!
<div class="row">
<div class="col-xs-2">
<span class="label label-primary"> Placement: </span>
<%= f.number_field :order, class: "form-control", id: "two", placeholder: 'Put in Order' %>
</div>
</div>
I know it's something in the default setting with bootstrap. I've tried to override it with inline-block or inline for all the classes, but it made no difference.
Maybe you'll have better luck.
try add form-inline class and or display:block-inline
You need to set the form-horizontal class on your form tag as explained here.
http://getbootstrap.com/css/#forms-horizontal
It looks like you are using ruby (erb) so try something like the following (taken from http://getbootstrap.com/css/#forms-horizontal):
<%= form_for ... class="form-horizontal" do |f| %>
<div class='form-group'>
<%= f.label :order, 'Placement', class: 'col-sm-2 control-label label label-primary' %>
<div class='col-sm-10'>
<%= f.number_field :order, class: "form-control", id: "two", placeholder: 'Put in Order' %>
</div>
</div>
</form>
If you look at the twitter-bootstrap website their jumbotron touches their nav-header. That's what I'm trying to replicate.
I added it to the top of my valuations index like so:
<div class="jumbotron">
<div class="container">
<h1>Values <small>subjective, put here whatever inspires you. </small></h1>
</div>
</div>
I also tried it without the container even though bootstrap says,
"To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within."
Is it because my application.html.erb is broken down into columns and so the jumbotron will only expand to the width of the col-md-9?
<body>
<%= render 'layouts/header' %>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<div class="container-fluid">
<div class="container">
<div class="col-md-9">
<%= yield %>
</div>
<div class="col-md-3">
<% if current_user.present? %>
<%= render 'layouts/sidebar' %>
<% end %>
</div>
</div>
I tried putting in its own partial but then there was padding between the nav-header and the jumbotron that I don't want. Like I said I want it like the bootstrap site. The other problem with a partial is I'd need a lot of them because I want to change the words in the jumbotron depending on the page.
How can we do it like bootstap?
Thanks for your time!
Yes, it's because whatever is rendered in the <%= yield%> gets wrapped in col-md-9. You can either:
close col-md-9 in views where you want to have the full-width jumbotron, and re-open it again in the footer.
don't use col-md-9 in application.rb if most of your views need to be expanding to full width.
EDIT:
To avoid repetition, you can paste the jumbotron styling in between your layouts/header and container-fluid, and use a variable for populating it with page-specific text. Here is what I mean:
<%= render 'layouts/header' %>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<div class="jumbotron">
<p class="text-center">
<%= #jumbotext %> <!-- this variable should be assigned in your controller action-->
</p>
</div>
<div class="container-fluid">
<div class="container"> <!-- check this too. not sure why you have two containers-->
<div class="col-md-9">
...
When using Bootstrap 3 with .form-horizontal, with the bootstrap classes below, I get forms with the label on top which is what I want. http://bootply.com/73486
However, in Image 2, I try to reduce the width to my desired size, using classes like .col-lg-*, which suddenly forces the labels to the side instead of remaining on top. I have tried different sizes to no avail..
<div class="form-group">
<label class="control-label"> <%= f.label :title %></label>
<div class="form-control">
<%= f.text_field :title, :placeholder => "title" %>
</div>
</div>
Image 1
Image 2
However, when I try to wrap inputs in grid columns so as to reduce the width to my desired size, the labels move to the side of the form inputs instead of on top.
<div class="form-group">
<label class="control-label col-lg-2"> <%= f.label :title %></label>
<div class="col-lg-10">
<div class="form-control">
<%= f.text_field :title, :placeholder => "title" %>
</div>
</div>
</div>
The code in your first example is correct. To reduce the width without shifting into a form-horizontal style, try wrapping the entire form-group (or the field set) in a smaller div.
<div class="col-lg-10">
<div class="form-group">
<label class="control-label"> <%= f.label :title %></label>
<div class="form-control">
<%= f.text_field :title, :placeholder => "title" %>
</div>
</div>
</div>
`<div class="col-lg-10">
<div class="form-group">
<label class="control-label"> <%= f.label :title %></label>
<%= f.text_field :title, :placeholder => "title", :class => "form-control" %>
</div>
</div>`
Try this
You could give the form a col-lg-10 in this case. Since you're actually trying to reduce the form size and not an individual input field this would be preferable.
On the subject of your .form-horizontal usage. If you like the labels on top, you shouldn't use .form-horizontal, just a form without a class. This would fix your problem as well.
In Bootstrap 3 the way .form-horizontal works changed a lot. The way it now works is by wrapping the form element in a .col-x-x div to give it the desired size and let the labels flow next to it. This has as an advantage to bootstrap 2 that you can easily change the width of the label column.
PS .control-label is not needed anymore