title: QtQuick 2 - Custom element, how to resize root object ot it's content?
body: <p>Is there a way to resize custom element to fit it's content? I wrote some button example on QML, but I need that to resize with text length each time scene played if size not defined in main.qml. Sorry, but can't find something about that over network, only reverse question on how to fit content to parent. There is a source:</p>
  
  <p><strong>BreezeButton.qml</strong></p>
  
  <pre><code>import QtQuick 2.2
  Item {
      id: root
      width: 172
      height: 72
      property string caption: "Button"
      property string iconSource: null
      signal clicked
      Rectangle {
          id: body
          border {
              width: 2
              color: "#808e8e"
          }
          anchors{
              fill: parent
          }
          gradient: Gradient {
              id: bodyGradient
              GradientStop { position: 0.4; color: "#4d4d4d" }
              GradientStop { position: 0.9; color: "#31363b" }
          }
          MouseArea{
              id: bodyMouseArea
              z: bodyText.z + 1
              anchors {
                  fill: parent
              }
  
              hoverEnabled: true
              onEntered: {
                  body.border.color = "#3daee9"
  
              }
              onExited: {
                  body.border.color = "#7f8c8d"
              }
              onPressed: {
                  body.color = "#3daee9"
                  body.gradient = null
              }
              onReleased: {
                  body.color = "#4d4d4d"
                  body.gradient = bodyGradient
              }
              onClicked: {
                  root.clicked()
              }
          }
          Text {
              id: bodyText
              anchors {
                  top: body.top
                  bottom: body.bottom
                  left: icon.right
              }
              width: body.width - icon.width
              font.pointSize: 14
              color: "#fcfcfc"
              text: caption
              verticalAlignment: Text.AlignVCenter
              horizontalAlignment: Text.AlignHCenter
          }
          Image {
              id: icon
              source: iconSource
              anchors {
                  left: body.left
                  top: body.top
                  bottom: body.bottom
                  leftMargin: 5
                  topMargin: 5
                  bottomMargin: 5
              }
              height: root.height - 8
              width: icon.height
              sourceSize.width: icon.width
              sourceSize.height: icon.height
          }
      }
  }
  </code></pre>
  
  <p>For example basic QML Button can resize each time scene played to fit it's text length.</p>