I am having trouble trying to get rid of the extra line breaks Rails seems to insert between fields with errors.
I created a new rails app, created a scaffolding called "users" with a name and an age, and then said validates :name, :presence => true and validates :age, :presence => true. Then I booted up the users/new page and just clicked "submit" without entering anything in the fields to generate the error page. What happened was that between the "name" label and the field for entering the name, an extra line break was inserted. Same with the "age" label and its field. How do I stop this extra line break from happening?
Ach, just got bitten by this one too.
When you have form fields with errors rails changes the output of form helper methods like #label and #text_field.
The result is your nice little "label" and "input" tags are still being emitted - just "stealth" wrapped with a surrounding div. For example:
f.label :name
goes from:
<label for="name">Name</label>
to:
<div class="field_with_errors"><label for="name">Name</label></div>
The default behavior of a div is "block" - which is causing your line breaks.
You can fix this by changing the css. As an example:
div.field_with_errors {
display: inline;
}
.field_with_errors:nth-child(odd) {
padding: 2px;
display: table;
}
.field_with_errors:nth-child(even) {
padding: 2px;
display: inline;
}
That's what I ended up changing mine to, since the extra line breaks were sort of nice on the labels but I didn't want the line breaks on the actual form fields.
Related
I have a simple rails 5 form for New/Edit using vertical alignment using Bootstrap4. Everything looks fine until I get an error. The .field_with_errors is breaking the alignment.
It seems like the .col-x-x selectors are being ignored once the field_with_errors is introduced. I know bootstrap 4 is still in alpha, but hoping someone has found a work around.
Here is the form:
.container.wow.fadeInUp{style: "visibility: visible; animation-name: fadeInUp;"}
%h2.state New State
.w-75
= errors_for(#state)
.card
= form_for [:admin, #state] do |f|
.card-block
.form-group.row
= f.label :name, class: 'col-sm-4 col-form-label'
.col-sm-5
= f.text_field :name, class: 'form-control'
.form-group.row
.col-sm-3
= f.submit "Save", class: 'btn btn-primary'
you can remove the field_with_error div that breaks your css
Here's a simple trick to do away with those pesky wrappers once and for all. Just add this block to your config/environment.rb file.
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
html_tag.html_safe
end
Difficult to find a good answer to this, as all the old answers seem to refer to .has-error, and this is no longer supported in Bootstrap.
An extention of the answer given by #LifterCoder, inspired by this blog post, allows the label tags to be ignored, but still wrap the other tags with .field_with_error tags.
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
if instance.kind_of?(ActionView::Helpers::Tags::Label)
html_tag.html_safe
else
"<div class=\"field_with_errors\">#{html_tag}</div>".html_safe
end
end
My HAML reads:
%table.screenshots
%thead
%trow
%td{:colspan => 12} Screenshots for #{element.name}
%tbody
- screenshots.each do |set|
%tr
- set[1].each do |shot|
- if shot == :blank_cell
%td{:colspan => set[0]}.twelfth
- else
%td{:colspan => set[0]}.twelfth
= image_tag(shot[1]) # <= ERROR APPEARS HERE
- if #redacted
%h1.blur
%span Image blurred in
%br
%span demo report only
%p #{shot[0]}
There are no invisible spaces or tabs after .twelfth.
Why, then, do I get this error?
Illegal nesting: content can't be both given on the same line as %td and nested within it.
BTW, I get the same exception when I run:
haml --debug print.html.haml
The class and id identifiers (. and #) must come after the tag name, and before any attribute hash.
In your code the problem is the line:
%td{:colspan => set[0]}.twelfth
This is interpreted as a td element with a colspan attribute, containing the content .twelfth, which would look like this when rendered, if it were by itself:
<td colspan='7'>.twelfth</td>
However this line also has content nested below, which Haml doesn’t allow.
You can fix this by using an explicit class entry in the attribute hash as you have in your answer, or by moving the .twelth class specifier in front of the attribute hash, like this:
%th.twelfth{:colspan => set[0]}
Fixed it by changing the offending line to:
%td{:colspan => set[0], :class => "twelfth"}
Looks like there's a bug in the HAML interpreter
I am trying to get some code syntax highlighting for some docs i'm writing, I'm using HAML and Highlight.js which will work for a single line of Ruby code like this (although the highlighting is not great):
%pre
%code
\=link_to('link name on page', 'link destiation', :class => 'class-name', :icon => 'clock-o', :icon_last => true)
But if I try and write some CSS in the pre and code tags, like this:
%pre
%code
ul {
li {
Background: red;
}
}
I get the "Illegal nesting: nesting within plain text is illegal." error, due to the brackets on the end of the CSS stuff.
Does anyone know of a plugin / method of being able to write code example (SASS, Ruby, HAML, Coffeescript mainly) on the webpage using HAML? Short of just writing all the css on one line. I'm aiming for this kind of result - CSS-Tricks
You can use the :preserve filter:
%pre
%code
:preserve
ul {
li {
Background: red;
}
}
This prevents the indented code being parsed as Haml, and also converts newlines into entities so that the code appears as you expect with no extra whitespace.
If you use the :ugly option exclusively you could use the :plain filter instead. This doesn’t convert newlines into entities but prevents parsing as Haml.
I am trying to find a way to display the checkbox and some text to the right properly. The default way the MVC View lays them out puts the checkbox below the label / text. So I tried to get them on the same line with this simplified code, but the text still rides up about half a line above the checkbox. How can you display a checkbox and some text to the right of the checkbox on the same line with proper vertical alignment for the text on the right? Thank you!
<div>
#Html.EditorFor(model => model.DriverDBARequired) Driver DBA Required
</div>
This must be a CSS issue. The standard site.css might cause that behavior:
label {
**display: block;**
font-size: 1.2em;
font-weight: 600;
}
If you change it to
display: inline
it should work. The following lines in the standard site.css can help you too:
label.checkbox {
display: inline;
}
Write your checkbox like something as:
<label class="checkbox">#Html.CheckBox("MyName", false) My text</label>
I'm building translation for my application, but I cannot figure out how to translate the default captions for form fields.
Specifically the file_form tag. The default is to produce a button with the caption 'Choose file' and a note to the side stating 'No file chosen'
Where in the yml do these translations exist?
Unfortunately, <input type="file"> and how it appears to the user is up to the browser, and it's not possible to chance all too much of it.
You can find several articles about styling them to look a bit different, but the text on the button itself and the note depends on the language of the browser the user are running, and you cannot change it (at least nothing I can find)
you better use bootstrap file upload. The code below is for my application and its multilanguage
= transloadit :image_resize
-6.times do |index|
.fileupload.fileupload-new.pull-left{style: "padding-right: 5px;", "data-provides" => "fileupload" }
.fileupload-new.thumbnail{:style => "width: 130px; height: 130px;"}
-if #provider.provider_images.present?
- if #provider.provider_images["provider_image#{index+1}"].present?
%img{:id=>"providerimage1", :src => #provider.provider_images["provider_image#{index+1}"][0]}/
.fileupload-preview.fileupload-exists.thumbnail{:style => "width: 130px; height: 130px;"}
%div
%span.btn.btn-file
%span.fileupload-new{:id => "selectbutton"}
-if index == 0
=t('select_profile_image')
-else
=t('select_image')
%span.fileupload-exists
-if index == 0
=t('select_profile_image')
-else
=t('select_image')
=file_field_tag "provider_image#{index+1}"