CUSTOM CHECKBOX NOT WORKING WITH MODEL POPUP?

Pravesh Singh

Total Post:101

Points:709
Posted by  Pravesh Singh
 1892  View(s)
Ratings:
Rate this:

Hi Guys

I have created custom checkbox in asp.net mvc 4 project, that working fine, but when custom checkbox used on model popup window, that not work. please help me!

 Custom checkbox css as below

.ckbox
{
 width: 25px;
 height: 25px;
}
.custom-checkbox
{
 position: relative;
 display: inline-block;
}

.custom-checkbox > .box
{
 position: relative;
 display: block;
 width: 25px;
 height: 25px;
 background-color: #FFF;
 padding: 0px;
 margin: 0px;
}

.custom-checkbox > .box > .tick
{
 position: absolute;
 left: 4px;
 top: 7px;
 width: 14px;
 height: 6px;
 border-bottom: 4px solid #000;
 border-left: 4px solid #000;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 display: none;
}

.custom-checkbox > input:checked + .box > .tick
{
 display: block;
}

.custom-checkbox > input
{
 position: absolute;
 outline: none;
 left: 0;
 top: 0;
 padding: 0;
 width: 25px;
 height: 25px;
 border: none;
 margin: 0;
 opacity: 0;
 z-index: 1;
}

custome checkbox code

<table>
<tr>
            <td class="td_user">
                <span class="custom-checkbox">
                    <input type="checkbox" id="chkPermissionIsUsers@(Model.UserID)" name="chkPermissionIsUsers@(Model.UserID)" class="ckbox"
                                    checked="@(pages != null && pages.Count(m => m.PageID == 1) > 0)" onclick = "onPermissionChanged(@Model.UserID,'Users', this.checked)"/>
                    <span class="box"><span class="tick"></span></span></span>
                <label class="lblFontStyle" for="chkPermissionIsUsers@(Model.UserID)" style="vertical-align: super;">
                    Users
                </label>
            </td>
</table>


Model popup

Model popup code used by below URL

https://www.mindstick.com/Articles/1117/crud-operation-using-modal-dialog-in-asp-dot-net-mvc


Thanks


  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: custom checkbox not working with model popup?

    Hi Pravesh!

    Changed custom checkbox z-index 1 to 99999 or replace custom-checkbox > input class from below class

    .custom-checkbox > input
    {
     position: absolute;
     outline: none;
     left: 0;
     top: 0;
     padding: 0;
     width: 25px;
     height: 25px;
     border: none;
     margin: 0;
     opacity: 0;
     z-index: 99999;
    }

    I hope it resolve your problem

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!