dimanche 8 mai 2016

Extra large checkboxes when webpage shrinks to iphone/android size

I swear last year when I was learning MVC I could create these huge checkbox inputs when the screen shrank to portable phone size. This was with bootstrap and I really didn't do anything different than what the Razor @Html.CheckBoxFor was doing. I assumed this was a characteristic of all responsive checkboxes.

For the life of me I can't duplicate this behavior. My responsive checkboxes these days are tiny and stuck against the left side when the screen gets small.

Here is a rough idea of what I had/want. (unless I was dreaming and visualized this in my dream).

Large Checkbox

It looked like a checkbox inside the usual @Html.EditorFor. Sure would like have these on my app.

Here is one of my checkboxes that look ok on big screen, but need a tiny little finger to click on a phone:

            <div class="form-group">
                 <span id="both" class="control-label col-md-2" onclick="retrieveHelp(4);"><strong>Both <span style="color:blue;text-decoration:underline;">?</span></strong></span>
                <div class="col-md-10">
                    <div class="checkbox">
                        &nbsp;&nbsp;@Html.EditorFor(model => model.Both) 
                        @Html.ValidationMessageFor(model => model.Both, "", new { @class = "text-danger-yellow" })

                    </div>
                </div>
            </div>




Aucun commentaire:

Enregistrer un commentaire