Checkbox tick outside of the box

[Derek]

Hi

 Would you have an idea why the tick is outside the box.

I use <p>..

See it here: http://prntscr.com/7dxgui

The checkbox is for JOINT_APPLICANT

The view is:

@using PartnerLink.Models
@using Telerik.OpenAccess.SPI
@model TBL_ASSIGNMENT
@section Head
{
    <link href="@Url.Content("~/Content/css/AddCase.min.css")" re rel="stylesheet" type="text/css" />
    <link href="https://da7xgjtj801h2.cloudfront.net/2015.1.408/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="https://da7xgjtj801h2.cloudfront.net/2015.1.408/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <link href="https://da7xgjtj801h2.cloudfront.net/2015.1.408/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="https://da7xgjtj801h2.cloudfront.net/2015.1.408/js/jquery.min.js"></script>
    <script src="https://da7xgjtj801h2.cloudfront.net/2015.1.408/js/jszip.min.js"></script>
    <script src="https://da7xgjtj801h2.cloudfront.net/2015.1.408/js/kendo.all.min.js"></script>
    <script src="https://da7xgjtj801h2.cloudfront.net/2015.1.408/js/kendo.aspnetmvc.min.js"></script>
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
    <script src="//cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js" type="text/javascript"></script>
}


@{
    Layout = "~/Views/Shared/_EmptyLayout.cshtml";
    ViewBag.Title = "Add case";
    EntitiesModel entities = new EntitiesModel();
    var currentUser = entities.TBL_USERs.FirstOrDefault(u => u.USER_ID == Model.USER_CREATED);
    var usersSource = entities.TBL_USERs
        .Where(u => u.LEAD_PROVIDER_ID == currentUser.LEAD_PROVIDER_ID)
        .Select(u => new UserDropBoxItem
        {
            UserId = u.USER_ID,
            FullName = u.FIRST_NAME + " " + u.SURNAME
        })
        .ToList();

    //usersSource.Add(new UserDropBoxItem() { UserId = "", FullName = "" });

    usersSource = usersSource.OrderBy(u => u.UserId).ToList();

    var salutations = entities.TBL_SALUTATIONs
        .Where(s => !s.OUT_OF_USE)
        .Select(s => new SalutationDropboxItem
        {
            Id = s.SALUTATION_ID,
            Salutation = s.SALUTATION
        })
        .ToList();
    salutations.Add(new SalutationDropboxItem() { Id = 0, Salutation = "" });

    salutations = salutations.OrderBy(s => s.Id).ToList();

    var country = entities.TBL_COUNTRies.Where(w => !w.OUT_OF_USE)
                        .Select(s => new { ID =s.COUNTRY_ID,
                                           Name=s.COUNTRY}

                        );

    var sourceCodes = entities.TBL_SOURCE_CODEs.Where(w=>!w.OUT_OF_USE)
                .Select(s => new TBL_SOURCE_CODE
                {
                    SOURCE_CODE_ID = s.SOURCE_CODE_ID,
                    SOURCE_CODE = s.SOURCE_CODE
                })
        .ToList();

}
<div class="all-content-wrapper">
    <div class="top-bar">
        <div class="title-container">
            <h1>Add case</h1>
        </div>
        <img class="logo" src="@Url.Content("~/Content/Images/logo_300x50.png")" alt=" autodraft" />
    </div>
    <form action="/CreateCase" method="POST" accept-encoding="UTF" id="AddCaseForm">

        <div class="main-content" style="height: 520px; width: 1000px;">
            <div class="content-column">
                <dl class="listcontent">
                    <dt><br /><label for="CALL_AGENT_ID">Call Agent <span class="required"> *</span></label></dt>
                    <dd>@Html.Kendo().DropDownListFor(m => m.CALL_AGENT_ID).Name("CALL_AGENT_ID").BindTo(usersSource).DataValueField("UserId").DataTextField("FullName").OptionLabel(" ").HtmlAttributes(new { required = "true", validationMessage = "Select Call Agent" })</dd>
                    <dt><br /><label for="CALL_AGENT_MANAGER_ID">Call Agent Manager <span class="required"> *</span></label></dt>
                    <dd>@Html.Kendo().DropDownListFor(m => m.CALL_AGENT_MANAGER_ID).Name("CALL_AGENT_MANAGER_ID").BindTo(usersSource).DataValueField("UserId").DataTextField("FullName").OptionLabel(" ").HtmlAttributes(new { required = "true", validationMessage = "Select Call Agent Manager" })</dd>
                    <dt><br /><label for="CUSTOMER_ADVISOR_ID">Customer Advisor <span class="required"> *</span></label></dt>
                    <dd>@Html.Kendo().DropDownListFor(m => m.CUSTOMER_ADVISOR_ID).Name("CUSTOMER_ADVISOR_ID").BindTo(usersSource).DataValueField("UserId").DataTextField("FullName").OptionLabel(" ").HtmlAttributes(new { required = "true", validationMessage = "Select Customer Advisor" })</dd>
                    <dt><br /><label for="CUSTOMER_ADVISOR_MANAGER_ID">Customer Advisor Manager <span class="required"> *</span></label></dt>
                    <dd>@Html.Kendo().DropDownListFor(m => m.CUSTOMER_ADVISOR_MANAGER_ID).Name("CUSTOMER_ADVISOR_MANAGER_ID").BindTo(usersSource).DataValueField("UserId").DataTextField("FullName").OptionLabel(" ").HtmlAttributes(new { required = "true", validationMessage = "Select Customer Advisor Manager" })</dd>
                    <dt><br />@Html.LabelFor(m => m.SOURCE_CODE_ID, "Source Code")</dt>
                    <dd>@Html.Kendo().DropDownListFor(m => m.SOURCE_CODE_ID).Name("SOURCE_CODE_ID").BindTo(sourceCodes).DataValueField("SOURCE_CODE_ID").DataTextField("SOURCE_CODE").OptionLabel(" ")</dd>
                    <dt></dt>
                    <dd>@Html.Kendo().CheckBoxFor(m => m.JOINT_APPLICANT).Name("JOINT_APPLICANT").Label("Joint Applicant").HtmlAttributes(new { style = " left: -5000px" })
                        @Html.Kendo().CheckBoxFor(m => m.PARTNER_UNAWARE).Name("PARTNER_UNAWARE").Label("Partner Unaware").HtmlAttributes(new { style = " left: -5000px" })

                    </dd>
                </dl>

            </div>
            <div class="content-column">
                <dl class="listcontent">
                    <dt><br /><label for="FIRST_NAME">First Name <span class="required"> *</span></label></dt>
                    <dd>@Html.Kendo().TextBoxFor(m => m.FIRST_NAME).Name("FIRST_NAME").HtmlAttributes(new { required = "true", validationMessage = "Enter First Name" })</dd>
                    <dt><br /><label for="SURNAME">Last Name <span class="required"> *</span></label></dt>
                    <dd>@Html.Kendo().TextBoxFor(m => m.SURNAME).Name("SURNAME").HtmlAttributes(new { required = "true", validationMessage = "Enter Last Name" })</dd>
                    <dt><br />@Html.LabelFor(m => m.MAIDEN_NAME, "Maiden Name")</dt>
                    <dd>@Html.Kendo().TextBoxFor(m => m.MAIDEN_NAME).Name("MAIDEN_NAME")</dd>
                    <dt><br />@Html.LabelFor(m => m.SALUTATION_ID, "Salutation")</dt>
                    <dd>@Html.Kendo().DropDownListFor(m => m.SALUTATION_ID).Name("SALUTATION_ID").BindTo(salutations).DataValueField("Id").DataTextField("Salutation")</dd>
                    <dt><br /><label for="ADDRESS_COUNTRY">Country <span class="required"> *</span></label></dt>
                    <dd>@Html.Kendo().DropDownListFor(m => m.ADDRESS_COUNTRY_ID).Name("ADDRESS_COUNTRY_ID").BindTo(country).DataValueField("ID").DataTextField("Name").OptionLabel(" ").HtmlAttributes(new { onchange = "countryChange(this.value);", required = "true", validationMessage = "Select Country" })</dd>
                    <dt><br />@Html.LabelFor(m => m.GENDER, "Gender")</dt>
                    <dd>
                        @Html.Kendo().RadioButtonFor(m => m.GENDER).Name("GENDER").Label("M").Value('M').HtmlAttributes(new { style = " left: -5000px" })

                        @Html.Kendo().RadioButtonFor(m => m.GENDER).Name("GENDER").Label("F").Value('F').HtmlAttributes(new { style = " left: -5000px" })
                    </dd>
                </dl>
            </div>
        </div>
        <div class="bottom-bar">
            <p class="close" style="margin-top: 0px; margin-top: 20px; position: fixed;">CLOSE</p>
            <input class="save-and-close" style="margin-top: 20px;" type="submit" value="ADD CASE" onclick="submitClicked()" />
            <input type="submit" class="creatingMessage" value="Creating Case..." disabled />
        </div>
        <a></a>
    </form>
</div>
<script>
    $(window).ready(function () {
        $("p.close").click(function () {
            location.pathname = "/";
        });
    });

    function submitClicked() {
        var validator = $("#AddCaseForm").kendoValidator().data("kendoValidator");
        var isvalid = validator.validate();
        if (isvalid) {
            $('.save-and-close').hide();
            $('.creatingMessage').show();
            $('.close').hide();
        }
    }

    function countryChange(selcountry) {
        var enabled = true;
        if (selcountry == 2) {
            enabled = false;
            $("#JOINT_APPLICANT").attr('checked', false);
            $("#JOINT_APPLICANT").attr('disabled', true);
        }
        else {
            $("#JOINT_APPLICANT").removeAttr('disabled');
            enabled = $("#JOINT_APPLICANT").is(":checked");
        }
    }

</script>

[Derek]

any ideas?

[Iliana Dyankova]

Hi Derek,

I believe the issue is caused by some custom CSS which overrides the default Kendo UI CheckBox rendering. Could you please remove all other styles (leaving only Kendo UI ones) and let me know if you observe the same problem? Also does the issue persist in all major browsers?

Regards,
Iliana Nikolova
Telerik