mercredi 2 septembre 2015

Unable to display right tick mark in checkbox in tablets and iPad

I have following code, it displays check mark ticked on desktop. But doesn't work on iPad and tablets. Functionality is working but right mark is not shown.

<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 borderAtRight" 
                                        
                                <!--  Dropdown and Menu -->
                                <div class="btn-group topFilterCtrl filterDropdn" dropdown dropdown-append-to-body
                                        id="ddlStatus"
                                   
                                >
                                        <div id="btn-append-to-body" type="button" class="btn btn-primary panelTextFont14 noBorder"          dropdown-toggle
                                                        
                                                >
                                                         Status<span class="caret caretSpan"
                                                        ></span>
                                                </div>
                                                <ul class="dropdown-menu dropDownLabel" role="menu" aria-labelledby="btn-append-to-body"
                                                        ng-show="!vm.showthis"  
                                                >
                                                        <div class="customScroll">
                                                                <li role="menuitem" class="changeColorOnHover"
                                                                        ng-repeat="optionThis in vm.List track by $index" ng-show="list.value != null">
                                                        
                                                                        <a href="#">
                                                                                <div class="checkbox" id="{}index}"
                                                                                        ng-show="this.value != null"
                                                                                        ng-click="vm.applyFilterForResultCount()"
                                                                                        ng-change="vm.getCount(this)"
                                                                                        ng-model="this.flag">
                                                                                        <label>
                                                                                                <input type="checkbox" 
                                                                                                        ng-click="vm.clickStatusCheckBox(this);$event.stopPropagation();" 
                                                                                                        ng-show="this.value != null"
                                                                                                        />
                                                                                                {{this.value}}
                                                                                        </label>
                                                                                </div>
                                                                        </a>
                                                                </li>
                                                        </div>
                                                        <!--Clear div-->
                                                        <li role="menuitem" class="btn btn-default buttonli"
                                                                ng-click="vm.clearAll()">
                                                                <a href="#">
                                                                        <p>
                                                                                <span class="clearAllBtn">Clear</span>
                                                                                <span class="dropDownBtnItem">  – All </span>
                                                                        </p>
                                                                </a>
                                                        </li>
                                                </ul>
                                        </div>
                        </div>
.topFilterCtrl{
    text-align: left;
    vertical-align: middle;
    padding-top: 8%;
    padding-bottom: 0%;
    border-radius: 0;
    margin-top: 0%;
    box-shadow: none;
    outline: none;
    border:none;
    width:100%;
}

portrait:

div.borderAtRight .filterDropdn{
                padding-top:14%;
        }

.filterDropdn{
        padding-top: 10%;
    height: 50px;
    max-height: 50px;
    overflow: hidden;
}

.noBorder{
    text-align: left;
    width:@full-width;
    box-shadow: none;
    outline: none;
    min-width: 80%;
    padding: 0;
    height: auto;
    min-height: 36px;
    border-top-color: none;
    border-top-style: none;
    border-top-width: none;
    border-right-color: none;
    border-right-style: none;
    border-right-width: none;
    border-bottom-color: none;
    border-bottom-style: none;
    border-bottom-width: none;
    border-left-color: none;
    border-left-style: none;
    border-left-width: none;
}

.dropDownLabel{
        margin:0 0 0 -16px;
}

.customScroll{
    height: auto;
    overflow-x: hidden;
    max-height:360px;
}

.customScroll>li>a, 
.customScroll>li>a:hover, 
.customScroll>li>a:active, 
.customScroll>li>a:focus {
    display: block;
    padding: 1px 22px;
    clear: both;
    white-space: nowrap;
        text-decoration : none;
}

.buttonli {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    margin: 2px 0px 2px 0px;
    width: 100%;
        background-color:#E4EAEF;
}

li.buttonli > a > p{
        margin-bottom:0;
}

input[type="checkbox"]{
        -webkit-appearance: checkbox;
}



Aucun commentaire:

Enregistrer un commentaire