5

I'm using some CSS form elements that use :checked styling, such as.

input:checked + label {
    background-color: green;
}

Where the corresponding HTML (simplified for example) would be:

<input type="checkbox">
<label>My Checkbox</label>

Unfortunately, :checked styling wreaks havoc when .field_with_errors comes into play, because it creates a div around both elements, like so:

<div class="field_with_errors">
    <input type="checkbox">
</div>
<div class="field_with_errors">
    <label>My Checkbox</label>
</div>

As far as I know, given that HTML structure it's no longer possible to style the label based on whether the checkbox is checked.

I can't entirely remove field_with_errors on either labels or inputs, because legacy aspects of the application I'm working on rely on it.

So I'm wondering if it is possible to simply make it so that field_with_errors doesn't wrap elements if they are hidden. I don't know a ton about Ruby/Rails yet, but I know (of course) that it runs pre-page-load. I'm still hoping beyond hope that maybe I'm not thinking of something :-D.

Any alternative but similarly-effective approaches are also welcome.

Pete
  • 7,289
  • 10
  • 39
  • 63

2 Answers2

3

You can just use raw HTML and generate the check box and label yourself, without using the view helpers. The name would be model[field] and you have to make sure that it sets the correct value when it is not selected because browsers don't send back unselected checkboxes.

Chloe
  • 25,162
  • 40
  • 190
  • 357
  • Wow, it sounds like this might work! My current radio button is structured like: `<%= f.radio_button :my_field, index %>` (it's inside a loop, thus `index` is present). how to get I get the name from the `:my_field` var? – Pete Sep 26 '15 at 03:30
  • Look at the source of the HTML that Rails generates in your browser and copy that. – Chloe Sep 26 '15 at 03:31
  • I could do that--but I'd prefer (if possible) to have it still dynamically pulled from the `:my_field` var. I have no idea what `:my_field` holds since `debug()` doesn't seem to show. Pardon my ignorance! – Pete Sep 26 '15 at 03:34
  • `:my_field` is the name of the field! The value is in `@model.my_field`. The name of the HTML element is `model[my_field]`. – Chloe Sep 26 '15 at 03:37
  • Oooh, haha. Okay. Why does it have a colon before it? – Pete Sep 26 '15 at 03:39
0

You can add a css rule that redefines a div with class field_with_errors to not be display block. 

div.field_with_errors { display: inline-block; }
Coenwulf
  • 1,937
  • 2
  • 15
  • 23
  • 1
    The `display: block;` isn't the issue. The issue is that you can't use CSS selectors on the `:checked` element to reach into the child div of a separate container. Thanks nonetheless for the input! – Pete Sep 26 '15 at 03:54
  • You should be able to write css rules that can still apply. Alternatively you could try not using a rails helper to generate the label. Something like – Coenwulf Sep 26 '15 at 04:01
  • Unfortunately the CSS isn't possible. http://stackoverflow.com/a/32793254/1809762 But yes! The raw solution is what I went with! – Pete Sep 26 '15 at 04:11
  • I see. If you are willing to use JavaScript then you could bind an event to the checkbox (using jQuery or the like) and have it change a class on the label which you could then style. Not pure CSS, but another option. – Coenwulf Sep 26 '15 at 04:18