4

This seems like it should be so basic but for the life of me I can't get it working.

In my MVC 5 web app, I would like to show the user a list of layouts using checkboxes so the user can select whichever layouts are required.

I'm using an editor template, that gets called as such:

<table class="table">
<tr>
            <th> 
                @Html.DisplayName("Selected")
            </th>
            <th>
                @Html.DisplayNameFor(x => x.Layout)
            </th>
        </tr>
        @Html.EditorForModel()
</table>

Inside the template I use a helper for the checkbox.

<tr>
    <td>
         @Html.CheckBoxFor(x => x.IsSelected)
    </td>
    <td>    
        @Html.DisplayFor(x => x.Layout)
    </td>
</tr>

This all works fine, I can capture what the user has selected in the Post

What I cannot do however is apply any CSS styles to the checkbox.

What I have read is it should be a matter of:

@Html.CheckBoxFor(x => x.IsSelected, new { @class = "css-checkbox" })

This however causes the checkbox to not be rendered.

I have tried a few things such as wrapping the checkbox in a 

<div class="checkbox">

but even though the checkbox is rendered, I cannot select any of the items.

Now there is hopefully just something simple I am doing or not doing?

EDIT 1:

I seem to have come across the problem, but am not sure how to fix it.

If I use the following code, it works:

<input id="theid" name="theid" type="checkbox" class="css-checkbox" /> 
<label class="css-label" for="theid">Using input </label>

What I need to do is for the:

@Html.CheckBoxFor(x => x.IsSelected, new { @class = "css-checkbox" })

to be turned into the same as when I use input and label.

The page source looks as such:

<input checked="checked" class="css-checkbox" data-val="true" data-val-required="The IsSelected field is required." id="test5" name="IsSelected" type="checkbox" value="true" /><input name="IsSelected" type="hidden" value="false" />


<input id="theid" name="theid" type="checkbox" class="css-checkbox" /> 
<label class="css-label" for="theid">Using input </label>

The top comes from the helper and the bottom one is using the input tag directly.

Neill
  • 711
  • 2
  • 13
  • 32
  • This does sound odd. If you look at the source of the rendered markup, is there anything there at all? – ediblecode Feb 29 '16 at 09:48
  • `@Html.CheckBoxFor(x => x.IsSelected, new { @class = "css-checkbox" })` works just fine and adds `class="css-checkbox"`. What issues are you having? –  Feb 29 '16 at 09:48
  • Have you checked the source to see if the checkbox has in fact been rendered, but is hidden due to conflicting stylesheet rule? – Joseph Woodward Feb 29 '16 at 09:51
  • @Html.CheckBoxFor(x => x.IsSelected, null, new { @class = "css-checkbox" }) try this – Imran Luhur Feb 29 '16 at 09:56
  • @ImranLuhur, There is no `CheckBoxFor()` extension method that accepts 3 parameters –  Feb 29 '16 at 09:58
  • do you have a class called css-checkbox ? – REDEVI_ Feb 29 '16 at 10:07
  • http://stackoverflow.com/a/16062173/4334348 – silviagreen Feb 29 '16 at 10:10
  • @REDEVI. Yes I do, but I now believe the problem is to do with MVC finding my stylesheet. If I put a basic css style directly into the Editor Template View, such as changing the size of the checkbox, it works as expected. – Neill Feb 29 '16 at 10:17
  • you might be missing the bundling part of it ? – REDEVI_ Feb 29 '16 at 10:20

0 Answers0