CODEWITHSUNDEEP
javascriptangularjs
maria
maria

Reputation: 159

angularjs wanted print layout wont be correct

im currently using this:

<li ng-repeat="items in ferdigheter">{{ items.title}}
<div class="circles">
    <div class="circle" ng-repeat="a in thisnumber(items.stars)"></div>
    <div class="empty_circle" ng-repeat="a in thisnumber(items.maxstars - items.stars)"></div>

</div>
</li>

When im viewing whats beeing printed (ctrl+p) the title is there, but the circles / empty circle is not ther in the print. any idea why?

How can i make sure that the circle`s will be printed too?

current page:

enter image description here

current print:

enter image description here

wanted print:

enter image description here

update:

scope:

  $scope.ferdigheter = [
        {tittel: 'Adobe Photoshop', stars: 2, maxstars: 5},
        {tittel: 'CSS/html', stars: 5, maxstars: 5},
        {tittel: 'PHP', stars: 4, maxstars: 5},
        {tittel: 'Angular', stars: 3, maxstars: 5},
        {tittel: 'Javascript', stars: 4, maxstars:5},
        {tittel: 'MS Word', stars: 4, maxstars: 5},
        {tittel: 'Dreamviewer', stars: 2, maxstars: 5},
        {tittel: 'Phpstorm', stars: 4, maxstars: 5},
        {tittel: 'Codeigniter', stars: 5, maxstars: 5},
        {tittel: 'XXX', stars: 3, maxstars: 5},
        {tittel: 'XXX', stars: 5, maxstars: 5},

    ];

Scope thisnumber Creates an array

Upvotes: 1

Views: 42

Answers (1)

Fredy Treboux
Fredy Treboux

Reputation: 3331

CSS styles for printing can be tricky. In Chrome for example you might need to use -webkit-print-color-adjust: exact; for yours to work.

See a much more complete answer here: https://stackoverflow.com/a/15253634/55154

Upvotes: 1

Related Questions