I have an HTML code that collapses the scratchpad. Once you open the section, the scratch pad looks okay, but after collapsing and opening again the problem is that the scratchpad has been shrinked.
See script code below:
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function()
{this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block")
{content.style.display = "none";}
else {content.style.display = "block";}
})}
}<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
<h3 class="collapsible" style="padding-top: 02px;" >
<span class="material-icons" >keyboard_arrow_right</span>Digital Signature
</h3>
<div class="signature-main-div">
<h4>Please provide your Signature below in the greenbox .</h4>
<scratch-pad accept="c.accept" clear="clear" height="250" width="650" ng-readonly="c.submitted"></scratch-pad>
</div>
</body>
</head>This is what it looks once opened:
After collapsing and opening back again, the height and width have changed:
Any idea on what is causing the issue?