This is a migrated thread and some comments may be shown as answers.

Checkbox tick outside of the box

2 Answers 45 Views
Button
This is a migrated thread and some comments may be shown as answers.
Derek
Top achievements
Rank 1
Derek asked on 06 Jun 2015, 08:43 PM

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 Answers, 1 is accepted

Sort by
0
Derek
Top achievements
Rank 1
answered on 09 Jun 2015, 07:50 PM
any ideas?
0
Iliana Nikolova
Telerik team
answered on 10 Jun 2015, 07:00 AM
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!
 
Tags
Button
Asked by
Derek
Top achievements
Rank 1
Answers by
Derek
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Share this question
or