1

semantic ui modal ptint using printjs library. but the result is not correctly showing the expected modal print. help ?

$(document).ready(function(){
$('#logIn').click(function(){
$('#modaldiv').modal('show');    
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.css" rel="stylesheet"/>

<div id="modaldiv" class="ui modal">

<button type="ui button" id="button" onclick="printJS({ printable: 
     'modaldiv',type: 'html',showModal:true, printContainer: 
      true,copyTagClasses: true})">
       Print
</button>  //print button and printjs command active
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="content">
<div class="ui medium image">
<img src="img/bmw5.png">
</div>
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href="#" 
target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>

<a class="item ui button" id="logIn">
<i class="user icon"></i> Log In 
</a>  // modal open login button
manikandanpachaiyappan
  • 73
  • 6

1 Answers1

1

The issue printing this modal is not related to print.js. The modal has a negative margin-top applied style which is the cause of issue when printing it.

In this fiddle, you can test using the Print2 button, it will print another html element content inside the same modal, without any issues.

https://jsfiddle.net/crabbly/y8e4ga8p/

crabbly
  • 5,106
  • 1
  • 23
  • 46