Fix qml example button layouts

The buttons in the qml examples are now set into layouts so that the
text is visible on different platforms.

Change-Id: Id25d01ea978905b5c744047b40d47e56e6ac14bd
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@digia.com>

1 files changed, 16 insertions, 7 deletions

diff --git a/examples/qmlsurface/qml/qmlsurface/newbutton.qml b/examples/qmlsurface/qml/qmlsurface/newbutton.qml
index 895db183..e44c9d1a 100644
--- a/examples/qmlsurface/qml/qmlsurface/newbutton.qml
+++ b/examples/qmlsurface/qml/qmlsurface/newbutton.qml
@@ -18,6 +18,7 @@
 
 import QtQuick 2.1
 import QtQuick.Controls 1.0
+import QtQuick.Controls.Styles 1.0
 
 Item {
     id: newbutton
@@ -26,17 +27,25 @@ Item {
 
     signal clicked
 
-    height: 80
+    implicitWidth: buttonText.implicitWidth + 5
+    implicitHeight: buttonText.implicitHeight + 10
 
     Button {
+        id: buttonText
         width: parent.width
         height: parent.height
-        Text {
-            id: buttonText
-            wrapMode: Text.WordWrap
-            verticalAlignment: Text.AlignVCenter
-            horizontalAlignment: Text.AlignHCenter
-            anchors.fill: parent
+
+        style: ButtonStyle {
+            label: Component {
+                Text {
+                    text: buttonText.text
+                    clip: true
+                    wrapMode: Text.WordWrap
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+                    anchors.fill: parent
+                }
+            }
         }
         onClicked: newbutton.clicked()
     }