List

Visual

An ordered or unordered dlist styled to match the dizmo theme (with the special iScrollJS library integrated).

Data Type

<div id="my-list" class="list" data-type="dizmo-list"><ol>..<ol></div>

Or

<div id="my-list" class="list" data-type="dizmo-list"><ul>..<ul></div>

Styling

Here is an example of a basic list styling. It is mandatory to set the position to absolute or relative, set overflow to hidden and add fixed sizes (or a percentage) to the list div .

 .list {
    border-top: 1px solid rgba(61, 61, 61, 0.5);
    border-bottom: 1px solid rgba(61, 61, 61, 0.5);
    height: 200px; /* or e.g. 100% */
    left: 10px;
    top: 10px;
    width: 200px;
    overflow: hidden;
    position: absolute;
  }
  .list ul {
    list-style-type: none;
    margin: 0px 10px 0px 0px;
    padding: 4px;
    position: relative;
  }

Usage

Manual initialization:

DizmoElements('#my-list').dlist();

Update the list after the contents have changed:

DizmoElements('#my-list').dlist('update');

Constraints

For a static list that is declared in HTML, the scrollbars are added automatically. But for a dynamic list that is created and updated at runtime, it is necessary to create the scrollbar manually:

if (this.iscroll !== undefined) {
    this.iscroll.dlist('create');
} else {
    this.iscroll = DizmoElements('#my-list');
    this.iscroll.dlist();
}

The scrollbar can also be destroyed manually:

if (this.iscroll !== undefined) {
    this.iscroll.dlist('destroy');
}