4

So I'm having an issue trying to implement materializecss' checkbox with @Html.CheckBoxFor. If I input exactly:

<input type="checkbox" id="test5" />
<label for="test5">Red</label>

it works. But if I try this:

@Html.LabelFor(m => m.RememberMe, new { @class = "login-label" })
@Html.CheckBoxFor(m => m.RememberMe, new { @type = "checkbox" })

the checkbox disappears way off the page to the left (the style of the checkbox gets its left set to -99999).

Is there any other way I can implement CheckBoxFor that would make materialize cooperate?

2
  • do you see what reneder this code @Html.CheckBoxFor?
    – Grundy
    Dec 4, 2015 at 17:48
  • why do you use new { @type = "checkbox" } ?
    – Gane
    Dec 8, 2015 at 14:26

3 Answers 3

12

I Was having same problem and the order of ChecBoxFor and LabelFor were like peter.edwards suggest. For me the problem was caused by a hidden element generated by @Html.CheckBoxFor:

<input checked="checked" class="check-box" data-val="true" id="IsActive" name="IsActive" type="checkbox" value="true">
<input name="IsActive" type="hidden" value="false">
<label for="IsActive">IsActive</label>

What I did to solve the problem was, move the hidden element to the bottom of the parent element:

 $("input[type='hidden']").each(function (index, element) { 
        $(this).appendTo($(element).parent());
    });
0

Try reversing your checkbox and label render order...

@Html.CheckBoxFor(m => m.RememberMe, new { @type = "checkbox" })
@Html.LabelFor(m => m.RememberMe, new { @class = "login-label" })
0
0
Case 1:

@Html.LableFor(x=>x.IsVpn)
@Html.CheckBoxFor(x=>x.IsVpn) (Suppose)

render like that
<lable for="IsVpn">
<input type="checkbox" name="IsVpn" value="true"/>
<input type="hidden" name="IsVpn" value="false"/>


But We Need like that For materialize css


<input type="checkbox" name="IsVpn" value="true"/>
<lable for="IsVpn">
<input type="hidden" name="IsVpn" value="false"/>

Case 2:

@Html.CheckBoxFor(x=>x.IsVpn) (Suppose)
@Html.LableFor(x=>x.IsVpn)

Now What happen:

<input type="checkbox" name="IsVpn" value="true"/>
<input type="hidden" name="IsVpn" value="false"/>
<lable name="IsVpn">

But our requirement is for materilize css :

<input type="checkbox" name="IsVpn" value="true"/>
<lable name="IsVpn">
<input type="hidden" name="IsVpn" value="false"/>

So we can't use @Html.CheckBoxFor materializ css directly

but it we can use output:

<input type="checkbox" name="IsVpn" value="true"/>
<lable name="IsVpn">
<input type="hidden" name="IsVpn" value="false"/>

it will work exactly same as checkboxfor.

But If we want razor syntax then we need to customize checkboxfor and need to make a extension..
2
  • Please note that it may be a good idea to provide some explanation about what exactly this code is doing, as it may not be very helpful for the original question asker to understand what's going on, as well as future visitors to the website. Oct 9, 2016 at 12:27
  • Apologies, I just noticed there are actually comments within the code itself, but it may be a better idea to include this explanation outside of the code block, because as it's currently formatted, it's a bit difficult to read and understand. Oct 9, 2016 at 12:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.