List View – Scrollbars

Introduction

Do you have trouble view the information in your list view? Do you need more width space or the list contains very long list of info? Is your solution to add in the scroll bars? If your answer is yes, you are at the right article!

How it works

Basically, you will just need to add in javascript in your form to cater for the horizontal and vertical scroll bar. Let’s being!

Steps

  1. Create a list view
  2. Create a form containing the list view. Create a data label to input the javascript.
  3. Copy from here and paste the script in your data label expression.
    sb1
    Script Explanation

    $(“[name=’AreaItem‘]”).parent().parent().wrap(“

    width:100%;overflow:auto;height: 100px; overflow-y: scroll;‘>

    “);});
    Words in red – Name of your list view in the form
    Words in orange – Set horizontal scrollbar (besides the script you have to set the list view width under the properties panel)
    Words in blue – Set vertical scrollbar (you will specify the height in the script)

  4. Take note of the list view properties panel
    sb1
  5. Please take note, the above script provide both vertical and horizontal bar. If you would like either of scroll bar only, you can just remove the redundant lines.
    EG For vertical bar only:

    $(“[name=’AreaItem‘]”).parent().parent().wrap(“

    height: 100px; overflow-y: scroll;‘>

    “);});

  6. And TADA! Your scrolls should appear as below!
    sb1
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s