To execute the example, the HEAD tag must include links to PP.js library and to PP.css visual style table. For scrollbars to become available on a panel, panel content must exceed panel size. Create the DropPanel component with scrollbars:
<body>
<!--Place the button that hides the panel-->
<div id="btn1"></div>
<script type="text/javascript">
var drop = new PP.DropPanel({//Create a drop-down panel
//Set contents panel the text field with specified dimensions
Content: "<div style='width: 250px; height: 700px'><b>ScrollBox in DropPanel</b><br/>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. </div>"});
drop.setWidth(150);//Panel width
drop.setHeight(200);//Panel height
var btn = new PP.Button({//Create a button
ParentNode: document.getElementById("btn1"),//ID in the tag div
Content: "Show DropPanel"
});
//Add a handler of the Click event for the button:
btn.Click.add(function(sender, args)
{
drop.show(10, 30, true); //Expanding panel
});
</script>
</body>
After executing the example the HTML page will contain a button labeled Show DropPanel. Clicking this button opens a panel with scrollbars at the right and at the bottom:
To show the scrollbars at the left and at the top, set the IsRTL property to true
See also: