My text is overflowing within a span element which has the class: form-control
Code:
<div class="row">
<div class="form-group col-sm-12">
<label>Notes:</label>
<span class="form-control"><%= #stuff.notes %></span>
</div>
</div>
And when #stuff.notes has a lot of text, it overflows like this:
I did look at this question, as well as this ticket within bootstrap. I am still having trouble coming up with a solution.
Update:
I realized I could use a form helper (even though it isn't a form) like this:
<div class="row">
<div class="form-group col-sm-12">
<label>Notes:</label>
<%= text_area_tag :notes, #complaint.notes, {class: "form-control", disabled: "disabled"} %>
</div>
</div>
Which renders it like this:
But I don't like how the disabled html attribute grays out the box and mutes the text. It makes it difficult for the user to read.
You could use a basic panel to get a similar feel. See Bootply Here
<label>Notes:</label>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
And if you really want to match the look of the form-control class, you could add a custom .inset-box-shadow class which would override the box shadow on the panel and give it that formy look. That may confuse users though, they may want to click and type in it.
Related
As shown in the image, my buttons are not inline with eachother and the cancel button is far bigger than it should be.
This is the code I'm currently using:
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<%= button_tag t('btn.save'), class: 'btn btn-brand-color', type: 'submit' %>
<%= link_to t('btn.cancel'), :back, class: 'btn btn-default' %>
</div>
</div>
What I want is to have the two buttons next to each other preferably by using already existing bootstrap classes.
As per comment - you have a link (a) declaration which is set to 100%.
tip -- might be easiest to use the browser inspector to find out which class and in which css file are overriding your intention.
For others in the future: If there is any doubt about whether a class is vanilla bootstrap, or something you've inadvertently overriding a class you hadn't intended to, you can view bootstrap's native behavior by inspecting the html row or element, right clicking - then click on Copy as HTML
In this questions example that output would be
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button name="button" type="submit" class="btn btn-brand-color"><span class="translation_missing" title="translation missing: en.btn.save">Save</span></button>
<a class="btn btn-default" href="javascript:history.back()"><span class="translation_missing" title="translation missing: en.btn.cancel">Cancel</span></a>
</div>
</div>
Paste that into http://www.bootply.com/new and click Run -- it's a good indicator of style interference (also Bootply lets you change versions of bootstrap to match your own.
I never used ruby-on-rails before. But if you get this, maybe you should create a new CSS class and include display: inline-block on the button & make sure the button with are not set width: 100%.
When using the horizontal-form in simple_form 3, I've got a f.input :name, hint: "this is a really long hint" the hint will display under the input field and wrap to whatever width the input is constrained to.
How do I make the hint display under both the label and the input but still within the form-group div that is around the label and the input?
This is how one of my fields is currently rendered (as shown in the screenshot above):
<div class="form-group string optional scenario_answers_value">
<label class="string optional col-xs-8 control-label" for="scenario_answers_attributes_14_value">Customer's Normal Oil Change Interval</label>
<div class="col-xs-4">
<input class="string optional form-control" data-original-title="hrs" data-placement="bottom" data-toggle="tooltip" data-trigger="focus" id="scenario_answers_attributes_14_value" name="scenario[answers_attributes][14][value]" rel="tooltip" type="text">
<p class="help-block">Most LT manufacturers recommend 250 hours because of wet stacking problems from the engine not running under a load.</p>
</div>
</div>
You force your form-group to render with bootstrap grid. 8/12 of row for a label and 4/12 for input field. In this way, you can`t use hint as you want.
You need something like:
`
<div class='form-group'>
<div class='row'>
<div class='col-xs-8'>
<label>
</div>
<div class='col-xs-4'>
<input class='form-control'>
</div>
</div>
<div class='row'>
<div class='col-xs-12'>
<p class='hint'></p>
</div>
</div>
</div>
Or you could try to style hint with CSS, but it is not the best way.
Also, you could provide your erb\haml\slim markup for more useful answers.
I am attempting to use a calendar icon from Foundation Icon set next to a rails form input, and figured a quick way to align the two while making it look good was to use Foundation's postfix labels. Here is my code followed by a screenshot, which shows that they are compatible, but the main priority of getting them to be aligned with each other fails to happen:
<div class="row collapse">
<div class="fourteen mobile-three columns">
<label for="fundraiser-expire-at">End Date</label>
<%= form.text_field 'expire_at',
class: 'datepicker' %>
</div>
<div class="two mobile-one columns">
<span class="postfix">
<i class="general enclosed foundicon-calendar show_datepicker"></i>
</span>
</div>
</div>
Does anyone know a way I can get what I'm looking for hear? Will it require css? I'm sure that css is A solution, I'm just wondering if I can use Foundation built in styling to get this working...
I contemplated deleting this question because it ended up being a really easy fix, but I figured that SOMEONE, SOMEWHERE, MIGHT benefit from this question persisting. The problem lies with the label being in the same section of fourteen columns as the input. The postfix does its best to align with the combo of the label and input. If you put the label outside the fourteen columns so that the input is the only member of that section, the postfix aligns itself with the input.
Adding to Jake Smiths's answer I will show where to change to make it the postfix get nicely aligned with the field. The example bellow uses Foundation 5.1.1 and Ruby on Rails 3.2.
<div class="row">
<div class="large-4 columns">
<div class="row collapse">
<div class="small-9 columns">
<%= f.label :altitude %> <!-- This line here must be moved outside this div -->
<%= f.text_field :altitude %>
</div>
<div class="small-3 columns">
<span class="postfix radius">meters</span>
</div>
</div>
</div>
</div>
This results in an not aligned field and label.
If we change it to:
<div class="row">
<div class="large-4 columns">
<div class="row collapse">
<%= f.label :altitude %> <!-- Now it is happy and aligned :-) -->
<div class="small-9 columns">
<%= f.text_field :altitude %>
</div>
<div class="small-3 columns">
<span class="postfix radius">meters</span>
</div>
</div>
</div>
</div>
I'm using Twitter-Bootstrap and want to generate the correct html to display the error view how it does it on the main site, which is:
The html for the above field is:
<div class="control-group error">
<label for="inputError" class="control-label">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
</div>
</div>
Note: I deleted Please correct the error, <span>, I just want the input field and label.
And if I was to use my sign up page as an example, the email field, it would be:
<div class="control-group">
<label for="user_email" class="control-label">Email*</label>
<div class="controls">
<input type="email" value="" name="user[email]" id="user_email" class="span3">
</div>
</div>
What do I have to do to get it to function like the former?
Don't re-invent the wheel. Use simple_form. The current version of the gem allows you to do the following:
rails generate simple_form:install --bootstrap
With that, you can use the simple_form helpers. They will generate the right things for you.
I've just encountered this issue, and have fixed it with a simple modification to the Bootstrap CSS.
My usual field code is:
<div class="control-group">
<%= f.label :fieldname, t('models.model.fieldname'), :class => "control-label" %>
<div class="controls">
<%= f.text_field :fieldname, :class => 'input-large' %>
</div>
</div>
Since I'm using f.label and f.text_field the label and input are both encapsulated with divs with the field_with_errors class (as Nicholas mentions), making the resulting HTML:
<div class="control-group">
<div class="field_with_errors"><label class="control-label" for="model_fieldname">Field name</label></div>
<div class="controls">
<div class="field_with_errors"><input class="input-large" id="model_fieldname" name="model[fieldname]" size="30" type="text" value=""></div>
</div>
</div>
To make these have the same look appearance as Bootstrap's <div class="control-group error"> style I add some extra selectors into bootstrap.css. I find all references to .control-group.error ... and add duplicate lines with .control-group .field_with_errors .... So I end up with this kind of thing:
.control-group.error > label,
.control-group.error .help-block,
.control-group.error .help-inline,
.control-group .field_with_errors > label,
.control-group .field_with_errors .help-block,
.control-group .field_with_errors .help-inline {
color: #b94a48;
}
It might not be the most elegant way of doing it for Rails, but to me it seemed a lot easier than more dependant gems or overriding the error processing. Yes, you'll have to make the same changes each time you update Bootstrap, but they're fairly simple changes, and you could probably make a patch file to do it automatically.
Rails automatically generates a div with the class field_with_errors when an error message appears. That div wraps the element with error. In order to customize it, you can add this line to application.rb:
config.action_view.field_error_proc = Proc.new { |html_tag, instance| %Q(<div class="field_with_errors">#{html_tag}</div>).html_safe }
This is the default, so in order to get the same structure as Twitter Bootstrap, you could play with it.
html_tag is a placeholder for the field with errors, e.g. <input name="model[attribute]" size="30" type="text" value="">
You could wrap this within another div, and also add a span saying "Please correct the error".
More info: http://guides.rubyonrails.org/configuring.html - item 3.9
I'm trying to accomplish the following mark-up for all my form elements
<div class="input-container">
<label>Topic Title</label>
<div class="input-holder">
<input type="text" />
</div>
</div>
<div class="textarea-container">
<label>Post</label>
<div class="textarea-holder">
<textarea></textarea>
</div>
</div>
invalid fields mark-up:
<div class="input-container alert">
<label>Topic Title</label>
<div class="input-holder">
<input type="text" />
</div>
</div>
<div class="textarea-container alert">
<label>Post</label>
<div class="textarea-holder">
<textarea></textarea>
</div>
</div>
here's my current haml markup:
.input-container
= f.label :title, 'Topic Title'
.input-holder
= f.text_field :title
.textarea-container
= f.label :body, 'Post'
.textarea-holder
= f.text_area(:body, :size => "60x10")
Now what would I need to do if I want the container divs to have the alert class when a field in my form is invalid?
I want to do the same thing but unfortunately haven't figured out a clean way to handle it.
You can override ActionView::Base.field_error_proc, but that doesn't help with the enclosing elements.
It can be done manually by checking errors on each field ('post.errors['body'].nil?') and outputting your alert class conditionally.
The next step could be extracting the logic into a view helper, and perhaps some further abstraction after that.
But it would still be nice to do this in a more automated, Rails-y fashion.
It might be best to use either the formtastic or simple_form gems which out of the box support highlighting an individual invalid field.
I'm almost certain they do this by changing the CSS class on the field or its container, which you could also hook into in your stylesheets.