Checkbox tick outside of the box

3 posts, 0 answers
  1. Derek
    Derek avatar
    104 posts
    Member since:
    Aug 2008

    Posted 06 Jun 2015 Link to this post

    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="@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>

  2. Derek
    Derek avatar
    104 posts
    Member since:
    Aug 2008

    Posted 09 Jun 2015 Link to this post

    any ideas?
  3. Kendo UI is VS 2017 Ready
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 10 Jun 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top