title: QML : Drop-down menu that opens upward
body: <p>I need to have drop-down that opens upwards on clicking on Menu button in QML.</p>
  
  <p>I have tried to use the listview for the same, but in the implementation we are getting drop-down which opens downwards.</p>
  
  <p>Any suggestions with reference to below snippet.</p>
  
  <pre><code>import QtQuick 1.1
  
  Rectangle {
      width: 800
      height: 480
  
      Rectangle {
          id:comboBox
          property variant items: ["Red", "Blue", "Green"]
  
          signal comboClicked;
          x: 651
          y: 344
          width: 141
          height: 30;
          z: 0
          smooth:true;
  
          Rectangle {
              id:chosenItem
              radius:4;
              width:parent.width;
              height:comboBox.height;
              color: "#454b4d"
              smooth:true;
              Text {
                  anchors.top: parent.top;
                  anchors.margins: 8;
                  id:chosenItemText
                  x: 11
                  y: 5
                  color: "#ffffff"
                  text:"Menu";
                  anchors.topMargin: 5
                  anchors.left: parent.left
                  anchors.leftMargin: 12
                  font.family: "Arial"
                  font.pointSize: 14;
                  smooth:true
              }
  
              MouseArea {
                  width: 400
                  height: 30
                  anchors.bottomMargin: 0
                  anchors.fill: parent;
                  onClicked: {
                      comboBox.state = comboBox.state==="dropDown"?"":"dropDown"
                  }
              }
          }
  
          Rectangle {
              id:dropDown
              width:comboBox.width;
              height:0;
              clip:true;
              radius:4;
              anchors.top: chosenItem.bottom;
              anchors.margins: 2;
              color: "lightblue"
  
              ListView {
                  id:listView
                  height:500;
                  model: comboBox.items
                  currentIndex: 0
                  delegate: Item{
                      width:comboBox.width;
                      height: comboBox.height;
  
  
                      Text {
                          text: modelData
                          anchors.top: parent.top;
                          anchors.left: parent.left;
                          anchors.margins: 5;
  
                      }
                      MouseArea {
                          anchors.fill: parent;
                          onClicked: {
                              comboBox.state = ""
                              chosenItemText.text = modelData;
                              listView.currentIndex = index;
                          }
                      }
                  }
              }
          }
  
  
          states: State {
              name: "dropDown";
              PropertyChanges { target: dropDown; height:30*comboBox.items.length }
          }
  
          transitions: Transition {
              NumberAnimation { target: dropDown; properties: "height"; easing.type: Easing.OutExpo; duration: 1000 }
          }
      }
  
  }
  </code></pre>