Print radio checked on UlkitCSS

1

I use UlkitCss and I have excerpts from a form with input radio fields as below.

When printing (Ctrl + p or window.print () or $ windows.print) the field is not checked. The selected radio simply does not appear. How do I get the field checked in?

I have a code:

 <form>
                <div class="uk-margin padding">
                    <div class="uk-form-controls">
                        <label><input class="uk-radio" type="radio" name="item4">item 1.</label><br>
                        <label><input class="uk-radio" type="radio" name="item4"> item 2</label><br>
                        <label><input class="uk-radio" type="radio" name="item4" checked="checked" ng-checked="true">item 3</label><br>
                        <label><input class="uk-radio" type="radio" name="item4">item 4 </label>


                    </div>
                </div>
            </form>
    
asked by anonymous 01.08.2018 / 06:25

2 answers

1

Israel did not quite understand the way you used ng-checked , you still used it along with checked HTML so it probably does not work. The most indicated one would be as in the example I made, using model and setting a value in inputs . Then what you put in the model will reflect on the input, then just print:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.marcado = 3;     // marca o terceiro checkbox
});

/* função de impressão */
document.getElementById('imprimir').onclick = function(){
  window.print();
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><formng-app="myApp" ng-controller="myCtrl">
     <div class="uk-margin padding">
          <div class="uk-form-controls">
              <label><input class="uk-radio" type="radio" name="item4" ng-model="marcado" value="1">item 1.</label><br>
              <label><input class="uk-radio" type="radio" name="item4" ng-model="marcado" value="2"> item 2</label><br>
              <label><input class="uk-radio" type="radio" name="item4" ng-model="marcado" value="3">item 3</label><br>
              <label><input class="uk-radio" type="radio" name="item4" ng-model="marcado" value="4">item 4 </label>

          </div>
     </div>
</form>

<button id="imprimir">Imprimir</button>
    
01.08.2018 / 15:31
0

I have identified where the problem happens. It was not angularjs or jquery. In the CSS file of UlkitCSS, line 1606 to 1627 there are the properties:

  .uk-radio,
.uk-checkbox {
  /* 1 */
  display: inline-block;
  height: 16px;
  width: 16px;
  /* 2 */
  overflow: hidden;
  /* 3 */
  margin-top: -4px;
  vertical-align: middle;
  /* 4 */
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 5 */
  background-color: transparent;
  /* 6 */
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border: 1px solid #cccccc;
  transition: 0.2s ease-in-out;
  transition-property: background-color, border;
}

Just comment the snippet

-webkit-appearance: none;
      -moz-appearance: none; 

and now the selected radio / checkbox appears in the

    
01.08.2018 / 17:06