Home > DeveloperSection > Forums > custom checkbox not working with model popup?
Pravesh Singh
Pravesh Singh

Total Post:101

Points:709
Posted on    March-01-2013 4:26 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 1426  View(s)
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




AVADHESH PATEL

Total Post:604

Points:4228
Posted on    March-02-2013 12:44 AM

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


Don't want to miss updates? Please click the below button!

Follow MindStick