Creating a Drop-down Panel with Scrollbars

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:

ScrollBox