平板电脑和iPad中的复选框中无法显示右勾号 [英] Unable to display right tick mark in checkbox in tablets and iPad

问题描述

我有以下代码，它在桌面上显示复选标记.但不适用于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;
}

我发现了这一点: https://github.com/angular-ui/bootstrap/Issues/2017

但是不确定如何实现它，因为我对AJS还是很陌生，所以我应该在代码中真正包含该指令吗?

But not sure how do I implement it, where should I really include this directive in my code as I am very new to AJS?

推荐答案

该复选框可能无法正确显示，因为input元素嵌套在label元素内(即使可能允许，但也混淆了它的用途)输入和标签).

The checkbox may not display correct because the input element is nested inside the label element (even though it may be allowed, it confuses the purposes of the input and the label).

如果问题是默认情况下未选中此复选框，则可能需要签出Angular的ng-checked="expression"语法.

If the issue is about the checkbox not being checked by default, you might need to check out the ng-checked="expression" syntax for Angular.

这篇关于平板电脑和iPad中的复选框中无法显示右勾号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！