Change the height and width of a widget

Setting the dimensions of a widget requires a bit of knowledge of HTML, but the process is simple. This process allows you to customize how the widget fits on your web page.

Note:

Note, this procedure only applies to the JavaScript code for a widget. Currently, URL widgets cannot be resized.

By default, a widget's height and width scale with the size of the browser. This dynamic property makes it so the widget can be viewed in most screen resolutions.

To adjust the dimensions of the widget, add a style div to the code surrounding your widget. This step is done with HTML, making the widget frame appearance fully customizable.

The code for the widget appears below, as provided by clicking the corresponding get code link on the Manage page:

<script type='text/javascript' language='JavaScript' src='https://secure.echosign.com/public/embeddedWidget?wid=2AAABLblqZhCb3ZNyEbi1ywHYaBw893IPRafJOjVvgE44n4Kb36XRArp5QgTpBhUWhLa7x81ek18*'></script> 

To adjust the size, add the following code before the widget code. This code sets the width to 500 pixels and the height to 600 pixels. The border for the widget frame can also be adjusted by changing the border properties.

<div style="height:500px; width:600px; border:1px solid black;">

The code to put in the website that hosts the widget follow:

<html>

<div style="height:500px; widget:600px; border: 1px solid black;">

<script type='text/javascript' language='JavaScript' src='https://secure.echosign.com/public/embeddedWidget?wid=2AAABLblqZhCb3ZNyEbi1ywHYaBw893IPRafJOjVvgE44n4Kb36XRArp5QgTpBhUWhLa7x81ek18*'>

</script>

</div>

</html>

As you can see, the resulting widget is displayed with the stated dimensions. Obviously, these dimensions aren't ideal, but it shows how setting the height and width values affects the posted widget.

More examples

Full screen 1

<body style="margin: 0; padding: 0;">
<script type='text/javascript' language='JavaScript' src='https://secure.echosign.com/public/embeddedWidget?wid=[yourwidgteId goes here]'>

</script>
</body>

Full screen 2

<div style="height:100%; width:100%; border:0px solid black;">

<script> </script>

</div>

 

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy