Split view

The split view layout is ideal for working through a queue of items because it allows the user to stay on the same screen while viewing and editing multiple items.

Record list + detail

By providing a record list on the right and the selected record detail on the left, allows easy editing and viewing of multiple records.

On the first column you can provide a footer to keep action buttons always visible, simply add .has-footer to the .scroll-column and wrap the buttons in a .scroll-column-footer.

SmartREST template detail


SmartREST template detail

Simulator detail


Simulator detail

Properties library


Properties library
<div class="row split-scroll">
  <!-- add class 'has-footer' when you need space for adding buttons in the bottom of the column, e.g. simulators -->
  <div class="col-md-6 scroll-column has-footer">
    <!-- check c8y-nav-stacked -->
    <ul class="c8y-nav-stacked inner-scroll ui-sortable">
      <li class="c8y-stacked-item removable" >
        […]
      </li>
      […]
    </ul>
    <div class="scroll-column-footer">
      <!-- place your buttons here -->
    </div>
  </div>
  <!-- switch the classes slideInRight or slideInTop by slideOutRight or slideOutBottom 
    to add transitions do the record detail view -->
  <div class="col-md-6 scroll-column fast animated slideInRight">
    <div class="card">
      […]
    </div>
  </div>

</div>