How to make widget scrollable?

By default our widget resize it’s height to show all the pictures and videos on your page. However it is possible to make widget scrollable. In such case you will be able to display only part of the pictures and have option to scroll to¬† see more of them.

Here is an example how scrollable widget looks like:

 

In order to achieve such effect you need to change your widget embed code. Here is an example of non-scrollable widget embed code:
<!-- LightWidget WIDGET --><script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/8bb737103e7a57f5a07b20c6e523acaa.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe>

Here is an example of scrollable widget embed code:
<!-- LightWidget WIDGET --><iframe src="//lightwidget.com/widgets/8bb737103e7a57f5a07b20c6e523acaa.html" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;height:300px;"></iframe>

 

Differences between the code

There are 4 differences between these code snippets. You need to apply all of them to achieve scrollable widget effect.

1. Remove script tag

<script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script> Script tag must be removed from embed code. This script tag is responsible for setting dynamic height of our widgets.

 

2. Remove scrolling attribute

scrolling="no" Scrolling attribute must be removed from iframe tag. It prevents adding scrollbar to widget.

 

3. Remove overflow property

overflow:hidden; Overflow rule for the widget must be removed as well to add scrollbar to widget.

4. Set widget height

height:300px; You must add height property to style attribute with the value of your choice. It will determine the height of your widget. In our case we set fixed height to 300px.

Comments (0)

You must be logged in to post comments.