© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

SCROLLING CONTENT

Create a scrollable region in your prototype's interface.

STEP 1: SETUP

In the mobile training document, open the page named "Scrolling Content". On the canvas are two widget groups, a "Header" group and a "Scrolling Content" group.


Right-click the "scrolling content" group and select "Convert to Dynamic Panel" from the context menu. Then, set the new dynamic panel's height to 515 pixels by entering "515" in the "h" field of either the Style Toolbar or the Style tab of the Inspector.

STEP 2: ADD SCROLLBARS

Right-click the dynamic panel and select "Scrollbars > Show Vertical Scrollbar as Needed". Alternatively, you can select this setting from the "Scrollbars" dropdown in the Properties tab of the Inspector.

STEP 4 (OPTIONAL): HIDE THE SCROLLBAR FROM VIEW

Scrollbars must be visible on a dynamic panel in order for it to be scrollable, but you can hide scrollbars from view by placing the scrollable dynamic panel inside another, smaller dynamic panel.


To do this, drag the right edge of the scrollable dynamic panel out until the scrollbar is over to the right of the "Header" group. Then, right-click the dynamic panel and select "Convert to Dynamic Panel". Finally, drag the new dynamic panel's right edge in until it lines up with the "header" group's right edge. The scrollbar should no longer be visible.

MORE RESOURCES

STEP 3: PREVIEW

Preview the prototype. Scroll through the content below the prototype's header.


(Note: If you would like to preview this page in the device frame provided on the "Device Frame" page, open that page, double-click the "Content Frame" inline frame, and select "[[PageName]]" in the dialog that appears.)

STEP 0: DOWNLOAD THE MOBILE TRAINING FILE

If you don't already have it, download AxureMobileTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials in the Axure mobile tutorials module.

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE