I have a form which the user will use to write down notes ( i am using sisyphus.min.js to autosave the form data). When the user wants to print his notes and he clicks print, the data inside the form (i.e. all his notes) should be printed without the constraints of the form borders (i only want to print the user's notes. I have tried the code below but when i click print the form borders and only a portion of the data inside the form appears in the print window. How can I extract all the data inside the form when the user clicks print (Ctrl+p).
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" src="sisyphus.min.js"></script>
<style type="text/css">
@media print
{
#non-printable { display: none; }
#printable{ display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
<h1> Sample Content</h1>
</div>
<div id="printable">
<form action="" id="myform" name="myform" method="post">
<textarea class="form-control" id="exampleTextarea" rows="13"></textarea>
</form>
</div>
<script type="text/javascript">
$('#myform').sisyphus();
</script>
</body>
</html>