2 files changed, 29 insertions, 31 deletions
diff --git a/examples/declarative/scrollbar/ScrollBar.qml b/examples/declarative/scrollbar/ScrollBar.qml
index 2186b35..5433156 100644
--- a/examples/declarative/scrollbar/ScrollBar.qml
+++ b/examples/declarative/scrollbar/ScrollBar.qml
@@ -2,6 +2,7 @@ import Qt 4.7
 
 Item {
     id: scrollBar
+
     // The properties that define the scrollbar's state.
     // position and pageSize are in the range 0.0 - 1.0.  They are relative to the
     // height of the page, i.e. a pageSize of 0.5 means that you can see 50%
@@ -14,18 +15,19 @@ Item {
     // A light, semi-transparent background
     Rectangle {
         id: background
-        radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1)
-        color: "white"; opacity: 0.3
         anchors.fill: parent
+        radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1)
+        color: "white"
+        opacity: 0.3
     }
     // Size the bar to the required size, depending upon the orientation.
     Rectangle {
-        opacity: 0.7
-        color: "black"
-        radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1)
         x: orientation == 'Vertical' ? 1 : (scrollBar.position * (scrollBar.width-2) + 1)
         y: orientation == 'Vertical' ? (scrollBar.position * (scrollBar.height-2) + 1) : 1
         width: orientation == 'Vertical' ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2))
         height: orientation == 'Vertical' ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2)
+        radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1)
+        color: "black"
+        opacity: 0.7
     }
 }
diff --git a/examples/declarative/scrollbar/display.qml b/examples/declarative/scrollbar/display.qml
index 421cb7f..cb1da16 100644
--- a/examples/declarative/scrollbar/display.qml
+++ b/examples/declarative/scrollbar/display.qml
@@ -3,56 +3,52 @@ import Qt 4.7
 Rectangle {
     width: 640
     height: 480
+
     // Create a flickable to view a large image.
     Flickable {
         id: view
         anchors.fill: parent
+        contentWidth: picture.width
+        contentHeight: picture.height
+
         Image {
             id: picture
             source: "pics/niagara_falls.jpg"
             asynchronous: true
         }
-        contentWidth: picture.width
-        contentHeight: picture.height
+
         // Only show the scrollbars when the view is moving.
-        states: [
-            State {
-                name: "ShowBars"
-                when: view.moving
-                PropertyChanges { target: verticalScrollBar; opacity: 1 }
-                PropertyChanges { target: horizontalScrollBar; opacity: 1 }
-            }
-        ]
-        transitions: [
-            Transition {
-                from: "*"
-                to: "*"
-                NumberAnimation {
-                    properties: "opacity"
-                    duration: 400
-                }
-            }
-        ]
+        states: State {
+            name: "ShowBars"
+            when: view.moving
+            PropertyChanges { target: verticalScrollBar; opacity: 1 }
+            PropertyChanges { target: horizontalScrollBar; opacity: 1 }
+        }
+
+        transitions: Transition {
+            from: "*"; to: "*"
+            NumberAnimation { properties: "opacity"; duration: 400 }
+        }
     }
+
     // Attach scrollbars to the right and bottom edges of the view.
     ScrollBar {
         id: verticalScrollBar
+        width: 12; height: view.height-12
+        anchors.right: view.right
         opacity: 0
         orientation: "Vertical"
         position: view.visibleArea.yPosition
         pageSize: view.visibleArea.heightRatio
-        width: 12
-        height: view.height-12
-        anchors.right: view.right
     }
+
     ScrollBar {
         id: horizontalScrollBar
+        width: view.width-12; height: 12
+        anchors.bottom: view.bottom
         opacity: 0
         orientation: "Horizontal"
         position: view.visibleArea.xPosition
         pageSize: view.visibleArea.widthRatio
-        height: 12
-        width: view.width-12
-        anchors.bottom: view.bottom
     }
 }