Print radio checked in Ulkitcss

Asked

Viewed 37 times

1

I use Ulkitcss and have snippets of a form with radio input 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 to appear the field checked in print?

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>
css

  • You need to create a verifiable example to demonstrate the problem, only this piece of code does not help. Note that I put this code in the fiddle and the print works perfectly in Chrome: http://jsfiddle.net/xpvt214o/528256/

  • With your code the way it is on the question executed on a page without this Uikit and without the angular is working normal, when I press Ctrl+p it appears checked, then it is something in CSS or more likely at the angle that is taking the checked when printing the page

2 answers

1


Israel did not understand very well the way you used the ng-checked, you still used it along with the checked of HTML, thus probably does not work. The most indicated there would be as in the example I made, using model and setting a value us inputs. Then what you set in the model will reflect in the input, then just have printed:

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>

<form ng-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>

0

I identified where the problem happens. It wasn’t about Angularjs or jquery. In the Ulkitcss CSS file, line 1606 to 1627 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 commenting on the excerpt 

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

and now appears the radio/checkbox selected in print

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.