ASP.NET

@using System.Web.Mvc.Razor;
@functions {
    private static WebViewPage page { get { return PageContext.Page as WebViewPage; } }
    private static System.Web.Mvc.HtmlHelper Html { get { return page.Html; } }
    private static UrlHelper Url { get { return page.Url; } }
    private static dynamic ViewBag { get { return page.ViewBag; } }
}

@helper avatar_select(object model)
{

<pre>
<div class="panel panel-default">
    <div class="panel-heading">
        <h4>Avatars</h4>
    </div>
    <div class="panel-body">

        <div class="col-sm-3">
            <div class="form-group">
                @Html.LabelFor(m => m.Avatar_Primary_ID, new { @class = "control-label" })
                <div class="avatarImage">
                    <img id="avatarPrimary_Select" data-avatarid="@Model.Avatar_Primary_ID" src="@String.Format("data:image/png;base64,{0}", Model.Avatar_Primary_Image.Base64)" alt="@Model.Name" height="100" />
                </div>
                <div class="avatarDelete">
                    <a id="AvatarDeleteButton" class="btn btn-primary has-spinner" name="AvatarDeleteButton">
                        Delete
                        <span class="spinner"><i class="fa fa-cog fa-spin"></i></span>
                    </a>
                </div>
                <div>
                    @Html.HiddenFor(m => m.Avatar_Primary_ID)
                    @Html.HiddenFor(m => m.Avatar_Primary_Image.Base64)
                    @Html.HiddenFor(m => m.Avatar_Secondary_ID)
                    @Html.HiddenFor(m => m.Avatar_Secondary_Image.Base64)
                </div>
            </div>
        </div>

        <div class="col-sm-9">

            <div class="avatarUploadMessage">
                <span class="text-primary"><strong>You may upload a new avatar</strong></span>
            </div>
            <div class="avatarUploadControls">

                <div class="form-group">
                    &lt;label class="control-label">Enter your avatar's name max(20)&lt;/label>
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-tag"></i>
                        </span>
                        &lt;input id="AvatarName" class="form-control" type="text" maxlength="20" placeholder="Name your Avatar" value="@Model.Avatar_Primary_Image.Name">
                        <span class="input-group-addon">
                            <i class="fa fa-comment"></i>
                        </span>
                        &lt;input id="AvatarAlt" class="form-control" type="text" maxlength="10" placeholder="Alternate Name" value="@Model.Avatar_Primary_Image.Alt">
                        <span class="input-group-btn">
                            <span class="btn btn-primary btn-file">
                                Choose
                                &lt;input id="AvatarBrowse" name="AvatarBrowse" class="btn btn-primary spinner" type="file" accept="image/*" />
                                <i id="AvatarSpinner" class=""></i>
                            </span>
                        </span>
                    </div>
                </div>

            </div>
            <div class="avatarPreviewMessage">
                <span class="text-primary"><strong>Or select one from your collection</strong></span>
            </div>
            <div id="avatarPreviewContainer">
                <div id="avatarPreviewSlider" name="avatarPreviewSlider">
                    <img src="~/Content/themes/base/images/indicator_Big.gif" style="padding-top: 6px;" />
                </div>
            </div>
            <div id="log" class="text-info" />
            <div class="avatarPreviewControlsHelp">
                <span id="avatarInstructions" class="text-primary">Touch and swipe to scroll more</span>
            </div>
        </div>

    </div>

<div class="col-md-offset-2 col-md-10">
    Hobbies<br />
    @for (int x = 0; x < Model.Hobbies.Count(); x++)
    {
        @Html.CheckBoxFor(p => p.Hobbies[x].IsSelected) @:  
        @Html.LabelFor(p => p.Hobbies[x].IsSelected, Model.Hobbies[x].Name) @:  
        @Html.HiddenFor(p => p.Hobbies[x].Name)
    }
    @Html.ValidationMessageFor(model => model.Hobbies)
</div>

[AtleastOne(ErrorMessage = "Select at least one checkbox.")]
public List<Hobby> Hobbies { get; set; }

public class AtleastOneAttribute : ValidationAttribute, IClientValidatable
{
    // For Server side
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        if (value != null)
        {
            var oHobby=value as IEnumerable;

            foreach (var _object in oHobby)
            {
                Hobby _oHobby = (Hobby)_object;
                if (_oHobby.IsSelected)
                {
                    return ValidationResult.Success;
                }
            }

        }
        return new ValidationResult(ErrorMessage);
    }
    // Implement IClientValidatable for client side Validation
    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule
        {
            ErrorMessage = FormatErrorMessage(metadata.GetDisplayName()),
            ValidationType = "atleastonetrue",
        };
        yield return rule;
    }
}

<script type="text/javascript">

    $.validator.unobtrusive.adapters.add('atleastonetrue',  function (options) {
        //options.rules['restrictbackdates'] = { mindate: options.params.mindate };
        options.messages['atleastonetrue'] = options.message;
        alert('hello');
        alert(options.message);
    });

    $.validator.addMethod("atleastonetrue", function (value, element, param) {
        alert('hello');

        //var date = new Date(value);
        //var minDate = new Date(param.mindate);
        //return date >= minDate;
    });
</script>

<div class="col-md-offset-2 col-md-10">
                Hobbies<br>
<input type="checkbox" value="true" name="Hobbies[0].IsSelected" id="Hobbies_0__IsSelected" data-val-required="The IsSelected field is required." data-val="true"><input type="hidden" value="false" name="Hobbies[0].IsSelected">    
<label for="Hobbies_0__IsSelected">Reading</label>   
<input type="hidden" value="Reading" name="Hobbies[0].Name" id="Hobbies_0__Name"><span data-valmsg-replace="true" data-valmsg-for="Hobbies[0].IsSelected" class="field-validation-valid"></span><input type="checkbox" value="true" name="Hobbies[1].IsSelected" id="Hobbies_1__IsSelected" data-val-required="The IsSelected field is required." data-val="true"><input type="hidden" value="false" name="Hobbies[1].IsSelected">    
<label for="Hobbies_1__IsSelected">Sports</label>   
<input type="hidden" value="Sports" name="Hobbies[1].Name" id="Hobbies_1__Name"><span data-valmsg-replace="true" data-valmsg-for="Hobbies[1].IsSelected" class="field-validation-valid"></span><input type="checkbox" value="true" name="Hobbies[2].IsSelected" id="Hobbies_2__IsSelected" data-val-required="The IsSelected field is required." data-val="true"><input type="hidden" value="false" name="Hobbies[2].IsSelected">    
<label for="Hobbies_2__IsSelected">Movies</label>   
<input type="hidden" value="Movies" name="Hobbies[2].Name" id="Hobbies_2__Name"><span data-valmsg-replace="true" data-valmsg-for="Hobbies[2].IsSelected" class="field-validation-valid"></span>                
            </div>

public class Product
  {
      public int ID { set; get; }
      public string Name { set; get; }
  }

  public class Hobby
  {
      public string Name { get; set; }
      public bool IsSelected { get; set; }

  }

  public class SampleViewModel
  {
      [Display(Name = "Products")]
      public List<Product> Products { set; get; }

      [AtleastOne(ErrorMessage = "Select at least one checkbox.")]
      public List<Hobby> Hobbies { get; set; }

      [Required(ErrorMessage = "Select any Product")]
      public int SelectedProductId { set; get; }

      [Required(ErrorMessage = "Select Male or Female")]
      public string Gender { get; set; }
  }

• The last row does not have the same height as the previous rows. It's off by a couple of pixels. I'm not setting the height of the grid, it's parent div or anything like that, so I don't know why this is happening.
  
  
• I want three of the columns to disappear when the browser resolution gets below a certain size (when the device is a phone used in portrait mode). When the resolution changes to trigger the style change, the data columns are hidden, but the headers are still there.