Altova MobileTogether Designer

Scrollable Tables

Home Prev Top Next

This tutorial describes the features of scrollable tables. The design file (ScrollableTables.mtd) contains two top pages, which show, respectively:

 

The settings of a scrollable table that is used to constrain end-of-page content to the bottom of the screen (see screenshot below)

A table that is displayed at a height that is a percentage of the screen height

 

Click to expand/collapse

 

The tutorial files

The files for this tutorial are located in your (My) Documents MobileTogether folder: MobileTogetherDesignerExamples\Tutorials\ScrollableTables.

 

ScrollableTables.mtd: This is the completed MobileTogether design file. Open this file and refer to it while reading this tutorial. You can run a simulation in MobileTogether Designer by pressing F5.

ScrollableTables-01.xml: This is an XML file that contains a simple and short customer database comprising seven customer records. You can see the file's structure in the $XML1 tree in screenshot above.

ScrollableTables-02.xml: This is a longer version of ScrollableTables-01.xml. It contains 29 records.

 

The paths in the design file are relative, and the XML files have not been deployed to a server. So, if you copy these three files to any folder, you will be able to correctly run the simulations in MobileTogether Designer.

 

Tutorial structure

This tutorial is organized into the following sections:

 

Tables that Force Full Screen Height describes settings to auto-adjust table heights so that the contents of the page fill the screen completely.

Tables Having Specific Heights describes how to create tables that are a specific fraction of the screen height. If the height required to display all the rows of the table is more than the table's defined height, then the table becomes scrollable.

 

© 2017-2023 Altova GmbH