CODEWITHSUNDEEP
htmlcssasp.netasp.net-mvc-4
SxChoc
SxChoc

Reputation: 619

Styling checkboxes in MVC 4

I wonder if someone could pass on some advice please.....

I have four checkboxes that are styled up in css. This is the straight HTML.

    <div class="checkbox checkbox-danger">
        <input id="showInDirectory" name="showInDirectory" type="checkbox" class="styled">
        <label for="showInDirectory">
            Show in directory?
        </label>
    </div>

and this is what is rendered on the page

enter image description here

And I'm trying to replicate this in 'code' so in my model I have 

public bool showinDirectory { get; set; }

And I set the true/false value based on what's held in the db for this value.

So the in my view I've entered:

    <div class="checkbox checkbox-danger">
        @Html.CheckBoxFor(x => x.showInDirectory, new { id = Html.NameFor(x => x.showInDirectory) })
        <label for="@Html.NameFor(x => x.showInDirectory)">Show in Directory</label>
    </div>

Which when rendered gives:

enter image description here

The value is always false and it's unselectable. The actual HTML that is generated is:

<div class="checkbox checkbox-danger">
<input checked="checked" data-val="true" data-val-required="The showInDirectory field is required." id="showInDirectory" name="showInDirectory" type="checkbox" value="true">
<input name="showInDirectory" type="hidden" value="false">
<label for="showInDirectory">Show in Directory</label>
</div>

I think that it's something to do with the hidden input that's being created but I just can't work out how to fix.

Could someone give me some advise please?

thanks, Craig

Upvotes: 1

Views: 8382

Answers (1)

Nigel Burke
Nigel Burke

Reputation: 51

It looks like you are using the awesome-bootstrap-checkbox.css (found here)

I've use it with Html Helpers before and it is indeed the hidden checkbox that's causing problems. The stylesheet uses selectors that requires the checkbox and its label to be side-by-side, but the html helper places a hidden input between them.

To make the css compatible with Html.CheckboxFor, you'll need to update your stylesheet from this:

.checkbox input[type=checkbox]:checked + label:after {
    font-family: 'Glyphicons Halflings';
    content: "\e013";
}

.checkbox-danger input[type="checkbox"]:checked + label::before, 
.checkbox-danger input[type="radio"]:checked + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}

To this:

.checkbox input[type=checkbox]:checked + input[type="hidden"] + label:after,
.checkbox input[type=checkbox]:checked + label:after {
    font-family: 'Glyphicons Halflings';
    content: "\e013";
} 

.checkbox-danger input[type="checkbox"]:checked + input[type="hidden"] + label::before,
.checkbox-danger input[type="checkbox"]:checked + label::before, 
.checkbox-danger input[type="radio"]:checked + label::before {
      background-color: #d9534f;
      border-color: #d9534f;
}

The new code accounts for the additional hidden element. You'll have to make this change everywhere the "+" selector is used between the checkbox and its label, but these two changes are the bare minimum to make your example code work.

Upvotes: 5

Related Questions