CODEWITHSUNDEEP
cssasp.net-mvc-4razor
Sinaesthetic
Sinaesthetic

Reputation: 12192

Why isn't my css being applied to my checkbox when checked, but only when rendered by razor?

I took the following HTML:

<div class="small-6 columns">
    <input id="temp-id-2" class="replace-checkbox" type="checkbox" checked="checked">
    <label for="temp-id-2" class="checkbox-label">Taxable?</label>
</div>

And implemented it in razor:

<div class="small-6 columns">
    @Html.CheckBoxFor(m => m.InventoryItem.Taxable, new { @class="replace-checkbox", id="temp-id-2" })
    @Html.LabelFor(m => m.InventoryItem.Taxable, new { @class="checkbox-label", @for="temp-id-2" })
</div>

It is getting rendered like this:

<div class="small-6 columns">
    <input checked="checked" class="replace-checkbox" data-val="true" data-val-required="The Taxable field is required." id="temp-id-2" name="InventoryItem.Taxable" type="checkbox" value="true" />
    <input name="InventoryItem.Taxable" type="hidden" value="false" />
    <label for="temp-id-2" class="checkbox-label">Taxable?</label>
</div>

And I have the following css:

form.app-form label.checkbox-label { 
    display: block; 
    visibility: visible; 
    font-weight: bold; 
    cursor: pointer; 
    color: #5c5c5c; 
    padding: 9px 10px; 
    padding-left: 40px; 
    background-repeat: no-repeat; 
    background-position: 10px center; 
    background-image: url("../images/field-check-inactive-10.png"); 
    background-position: right center; padding-left: 10px; 
}

form.app-form .replace-checkbox { 
    position: absolute; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    width: 1px; 
    margin: -1px; 
    padding: 0; 
    border: 0; }
form.app-form .replace-checkbox:checked + label.checkbox-label { 
    padding-left: 40px; 
    background-repeat: no-repeat; 
    background-position: 10px center; 
    background-image: url("../images/field-check-10.png"); 
    background-position: right center; 
    padding-left: 10px; 
}

When I run the plain HTML, I am able to check the checkbox and it changes from a greyed out check mark to a darkened in check mark. However, when I render it in razor, the checked state does not change. I noticed that the page is still detected that it is being checked because I can see the values change when I submit the form, but the css doesn't seem to get applied when it is in the checked state. I'm stumped. Any ideas?

Upvotes: 2

Views: 1215

Answers (1)

Sinaesthetic
Sinaesthetic

Reputation: 12192

As it turns out, the problem is with how MVC uses hidden fields to post data back to the controller. In this chunk:

<div class="small-6 columns">
    <input checked="checked" class="replace-checkbox" data-val="true" data-val-required="The Taxable field is required." id="temp-id-2" name="InventoryItem.Taxable" type="checkbox" value="true" />
    <input name="InventoryItem.Taxable" type="hidden" value="false" />
    <label for="temp-id-2" class="checkbox-label">Taxable?</label>
</div>

It added the hidden field element which broke the css selector form.app-form .replace-checkbox:checked + label.checkbox-label which selects the label immediately following the checkbox. Since it no longer immediate follows the checkbox, it never gets applied.

My fix (for now) for this was to change the + to a ~

Upvotes: 4

Related Questions