Materialize css checkbox ASP.NET MVC

Question

I am trying to implement material css to my mvc app, but checkboxfor is giving me hard time. The thing is check box in materialcss has a specific usage setup like this

@for (int j = 0; j < Model.Questions[i].Answers.Count; j++)
{
    <label>
        <input type="checkbox" />
        <span>Red</span>
     </label>
}

if you don't do it like this it won't work, so, naturally I've tried

@for (int j = 0; j < Model.Questions[i].Answers.Count; j++)
    {
    <label>
        @Html.EditorFor(model => Model.Questions[i].Answers[j].IsTrueUserChoice)
        @* or this *@
        @Html.CheckBoxFor(model => Model.Questions[i].Answers[j].IsTrueUserChoice)
        <span></span>
    </label>
}

htm.editorfor and checkboxfor render 2 checkbox tags one is visible and one is hidden (that how checkbox work in mvc), but with materializecss I can't do that because <span></span> has to go bellow <input type="checkbox"/> so this is not going to work because the hidden checkbox field is below checkbox.

Do you have any suggestions on how to fix this?

Looks like whoever implemented checkboxes got a little bit carried away. I don't see how this is possible to achieve. I would file a issue. Title it something like "Razor rendering engine can't render materialize.css checkboxes". PS: also, for completeness, please include the outer for loop with i variable in it in the code snippet. — stopkillinggames.com
– stopkillinggames.com, Commented Jul 23, 2018 at 19:54
thanks for comment. filing an issue would take too long, probably wouldnt be fixed. i am sure this can be done with custom html helper — Stefan Ivovic
– Stefan Ivovic, Commented Jul 23, 2018 at 20:35
You need to modify the css to us a sibling selectior. Refer this answer for an example — user3559349
– user3559349, Commented Jul 23, 2018 at 22:49

Vanderlei Adriano · Accepted Answer · 2018-10-06 16:26:08Z

0

Use "DisplayNameFor"...

<label>
    @Html.CheckBoxFor(model => Model.Questions[i].Answers[j].IsTrueUserChoice)
    <span>@Html.DisplayNameFor(model => Model.Questions[i].Answers[j].IsTrueUserChoice)</span>
</label>

And modify the relevant CSS:

label input[type=checkbox].checkbox ~ span:before 
{
    ....
}

answered Oct 6, 2018 at 16:26

Vanderlei Adriano

5966 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stefan Ivovic Over a year ago

i fixed it with custom html helper

Collectives™ on Stack Overflow

Materialize css checkbox ASP.NET MVC

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related