ASP.Net MVC Helper Breaks Foundation Zurb

Question

I have one problem with the MVC helper CheckboxFor. I found that the generated HTML code create a hidden field and that breaks the style on foundation zurb.

I am using this helper on the View:

@Html.CheckBoxFor(model => model.Client.Contact.IsLocked)
@Html.LabelFor(model => model.Client.Contact.IsLocked)

And the generated code is this one:

<input data-val="true" data-val-required="The Is Locked field is required." id="Client_IsLocked" name="Client.IsLocked" type="checkbox" value="true"><input name="Client.IsLocked" type="hidden" value="false">
<label or="Client_IsLocked">Is Locked</label>

It looks that the hidden field is causing that the label is not aligned with the checkbox. Any suggestions?

Answer 1

I found the answer to my question. The reason is because the selector of foundation's css for checkbox and label, it doesn't have a selector that includes the hidden field. Quick fix, just add this selector to the project's css file:

input[type="checkbox"] + input[type="hidden"] + label,
    input[type="radio"] + input[type="hidden"] + label {
      display: inline-block !important;
    }