0

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?

It'sMe
  • 99
  • 1
  • 10
  • The hidden input isn't doing anything to your layout. It's not rendered by any browser and therefore has no impact on layout. There's some other issue, but without more information there's not much we can do to help. I would suggest posting more of your view code so we can have some context and maybe a screenshot so we can see the problem. – Chris Pratt May 21 '15 at 16:53
  • The hidden input is causing that breaks the default alignment of label with the checkbox. I know because if I remove in the editor in the browser it render as expected. – It'sMe May 21 '15 at 19:17
  • What browser? That'd be highly abnormal since hidden inputs are not layout elements. They don't get factored in at all in rendering. – Chris Pratt May 21 '15 at 20:57
  • I get the same issue in Chrome and Firefox. I found the answer to my question. Thank you Chris. – It'sMe May 21 '15 at 23:03
  • Please consider posting the answer you arrived at as an actual answer. – David Tansey May 21 '15 at 23:17
  • Thank you David, I just did it. – It'sMe May 22 '15 at 00:13

1 Answers1

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;
    }
It'sMe
  • 99
  • 1
  • 10
  • Or `input[type="checkbox"] ~ label { .... }` if you wrap your `@CheckBoxFor()` and `@LabelFor()` inside a containing `
    ` element
     –  May 22 '15 at 09:47