The problem is that I am not able to figure out how to implement mousearea on outer element if inner elements made by me also use mousearea and do some some action on being clicked. As soon as i apply mousearea on outer rectangle the whole thing becomes unclickable and no action takes place on the click.

Code for big cell
Qt Code: 
  1. import Qt 4.7
  2.  
  3. /*This is used as a container to the bigger cell in the my recommendation list.*/
  4. Item {
  5.     id: bigButton
  6.     signal bigTileClicked
  7.     property string tipText
  8.     property string tipTitle
  9.     property string tipId
  10.     property string tipStatus
  11.     width: 519
  12.     height: 308
  13.  
  14.     Rectangle
  15.     {
  16.         id:innerRect
  17.         x:0
  18.         y:0
  19.     /*This is used to display the image of the big cell.*/
  20.     Image {
  21.             id:bigTile
  22.             x:0
  23.             y:0
  24.             width: 519
  25.             height: 308
  26.             source: "ui_images/BigCell.png"
  27.             opacity: 1
  28.             smooth: true
  29.  
  30.             /*Here RemindMeCell is used to create button on the big cell. */
  31.             RemindMeCell{
  32.                         id:highlightTile
  33.                         x:131
  34.                         y:254
  35.                         buttonText: "Remind me to do this!"
  36.                         onClicked: allReminderSlotClass.topRecommendationDetails(bigButton.tipId,buttonText);
  37.             }
  38.  
  39.             /*Here trash can button is create on the big tile to create Trash can button.*/
  40.             TrashCanCell{
  41.                 id:trashCanTile
  42.                 x:465
  43.                 y:254
  44.                 onClicked:allReminderSlotClass.getClickedTipValueForTipPop(tipId,tipTitle);
  45.             }
  46.  
  47.         /* This is the text of the of the status of the reminder.*/
  48.         Text {
  49.             id: stausText
  50.             text: bigButton.tipTitle
  51.             color: "orange"
  52.             x:15
  53.             y:5
  54.             wrapMode: Text.Wrap
  55.             horizontalAlignment: Text.AlignLeft
  56.         }
  57.  
  58.         /*This is the text for the reminder of the big tile. */
  59.         Text {
  60.             id: text
  61.             text: bigButton.tipText
  62.             color: "white"
  63.             x:15
  64.             y:30
  65.             font.pixelSize: 14
  66.             font.pointSize:12
  67.             width: 500
  68.             height: 200
  69.             wrapMode: Text.Wrap
  70.             horizontalAlignment: Text.AlignLeft
  71.         }
  72.         /*This is applied on the outer container to make the cell clickable*/
  73.  
  74.      }
  75.     /*This is applied on the outer container to make the cell clickable*/
  76.    MouseArea {
  77.        id: bigCellMouseArea
  78.        anchors.fill: parent
  79.        //anchors.top: innerRect.top
  80.        //anchors.bottom: text.top
  81.        //anchors.left: highlightTile.left
  82.        onClicked: {
  83.            allReminderSlotClass.getReminder("big cell");
  84.        }
  85.    }
  86.   }
  87.  
  88.      /*This is applied on the outer container to make the cell clickable*/
  89. //    MouseArea {
  90. //        id: bigCellMouseArea1
  91. //        anchors.fill: parent
  92. ////        anchors.top: parent.top
  93. ////        //anchors.bottom: text.top
  94. ////        anchors.left: highlightTile.left
  95. //        onClicked: {
  96. //            allReminderSlotClass.getReminder("big cell");
  97. //        }
  98. //    }
  99.    }
To copy to clipboard, switch view to plain text mode 


Code for PrimaryButton which is also clickable

Qt Code: 
  1. import Qt 4.7
  2.  
  3. Rectangle {
  4.     id:mainRect
  5.     width: primary_button.width
  6.     height: 42
  7.  
  8.     FontLoader { id: whitney; name: "Whitney" }
  9.      property string tipIdValue
  10.     property string buttonText//: "The Quick brown fox Jumped Over the Lazy Dog"
  11.     color: "#323232"
  12.  
  13.     Rectangle {
  14.         id: primary_button
  15.  
  16.         //property string text: "The Quick brown fox Jumped Over the Lazy Dog"
  17.  
  18.         signal clicked
  19.  
  20.         //anchors.centerIn: parent
  21.  
  22.         //width: buttonLabel.width + 20
  23.         width: {if((buttonLabel.width + 20) < 265)
  24.                     return 265;
  25.                 }
  26.         height: 42
  27.  
  28.         color: parent.color
  29.  
  30.         smooth: true
  31.  
  32.         // Default state
  33.         state: "enabled"
  34.  
  35.         Rectangle {
  36.  
  37.             id:primary_button_enabled
  38. //            width: {if((buttonLabel.width + 20) < 265)
  39. //                        return 265;
  40. //                    }
  41.             // Create left end cap enabled
  42.             Image {
  43.                 id: left_cap_enabled
  44.                 source: "ui_images/button_primary_normal_enabled_left_side.png"
  45.                 anchors.right: parent.left
  46.             }
  47.  
  48.             // Create center fill enabled
  49.             Image {
  50.                 id: center_fill_enabled
  51.                 source: "ui_images/button_primary_normal_enabled_center_tile.png"
  52.                 anchors.left: left_cap_enabled.right
  53.                 fillMode: Image.Tile
  54.                 //width: buttonLabel.width + 20
  55.                             width: {if((buttonLabel.width + 20) < 265)
  56.                                         return 265;
  57.                                     }
  58.             }
  59.  
  60.             // Create right end cap enabled
  61.             Image {
  62.                 id: right_cap_enabled
  63.                 source: "ui_images/button_primary_normal_enabled_right_side.png"
  64.                 anchors.left: center_fill_enabled.right
  65.             }
  66.  
  67.         }
  68.  
  69.         Rectangle {
  70.  
  71.             id:primary_button_pressed
  72.  
  73.             // Create left end cap pressed
  74.             Image {
  75.                 id: left_cap_pressed
  76.                 source: "ui_images/button_primary_normal_pressed_left_side.png"
  77.                 anchors.right: parent.left
  78.             }
  79.  
  80.             // Create center fill pressed
  81.             Image {
  82.                 id: center_fill_pressed
  83.                 source: "ui_images/button_primary_normal_pressed_center_tile.png"
  84.                 anchors.left: left_cap_pressed.right
  85.                 fillMode: Image.Tile
  86.                 //width: buttonLabel.width + 20
  87.                 width: {if((buttonLabel.width + 20) < 265)
  88.                             return 265;
  89.                         }
  90.             }
  91.  
  92.             // Create right end cap pressed
  93.             Image {
  94.                 id: right_cap_pressed
  95.                 source: "ui_images/button_primary_normal_pressed_right_side.png"
  96.                 anchors.left: center_fill_pressed.right
  97.             }
  98.  
  99.         }
  100.  
  101.  
  102.         Rectangle {
  103.  
  104.             id:primary_button_disabled
  105.  
  106.             // Create left end cap disabled
  107.             Image {
  108.                 id: left_cap_disabled
  109.                 source: "ui_images/button_primary_normal_disabled_left_side.png"
  110.                 anchors.right: parent.left
  111.             }
  112.  
  113.             // Create center fill disabled
  114.             Image {
  115.                 id: center_fill_disabled
  116.                 source: "ui_images/button_primary_normal_disabled_center_tile.png"
  117.                 anchors.left: left_cap_disabled.right
  118.                 fillMode: Image.Tile
  119.                // width: buttonLabel.width + 20
  120.                 width: {if((buttonLabel.width + 20) < 265)
  121.                             return 265;
  122.                         }
  123.             }
  124.  
  125.             // Create right end cap disabled
  126.             Image {
  127.                 id: right_cap_disabled
  128.                 source: "ui_images/button_primary_normal_disabled_right_side.png"
  129.                 anchors.left: center_fill_disabled.right
  130.             }
  131.  
  132.         }
  133.  
  134.  
  135.         MouseArea {
  136.             id: mouseArea
  137.             anchors.fill: parent  //onClicked: container.clicked()
  138.             onPressed: primary_button.state = "pressed"
  139.             onReleased: primary_button.state = "enabled"
  140.             //onClicked: primary_button.state = "pressed"
  141.             onClicked:popUpSlot.clickedDetails(tipIdValue,buttonText) //primary_button.clicked()
  142.         }
  143.  
  144.         Text {
  145.             id: buttonLabel
  146.             text: mainRect.buttonText
  147.             anchors.centerIn: primary_button
  148.             color: "white"
  149.             font.family: "Whitney-Medium"
  150.             font.pixelSize: 14
  151.             //font.capitalization: Font.Capitalize
  152.         }
  153.  
  154.  
  155.         states: [
  156.             State {
  157.                 name: "enabled"
  158.                 PropertyChanges { target: primary_button_enabled; visible:true; }
  159.                 PropertyChanges { target: primary_button_pressed; visible:false; }
  160.                 PropertyChanges { target: primary_button_disabled; visible:false; }
  161.                 PropertyChanges { target: buttonLabel; color:"white"; }
  162.                 PropertyChanges { target: mouseArea; enabled:true; }
  163.             },
  164.             State {
  165.                 name: "pressed"
  166.                 PropertyChanges { target: primary_button_enabled; visible:false; }
  167.                 PropertyChanges { target: primary_button_pressed; visible:true; }
  168.                 PropertyChanges { target: primary_button_disabled; visible:false; }
  169.                 PropertyChanges { target: buttonLabel; color:"white"; }
  170.                 PropertyChanges { target: mouseArea; enabled:true; }
  171.             },
  172.             State {
  173.                 name: "disabled"
  174.                 PropertyChanges { target: primary_button_enabled; visible:false; }
  175.                 PropertyChanges { target: primary_button_pressed; visible:false; }
  176.                 PropertyChanges { target: primary_button_disabled; visible:true; }
  177.                 PropertyChanges { target: buttonLabel; color:"#797979"; }
  178.                 PropertyChanges { target: mouseArea; enabled:false; }
  179.             }
  180.  
  181.         ]
  182.  
  183.  
  184.     }
  185.  
  186. }
To copy to clipboard, switch view to plain text mode 


Now the problem is that if the code of mousearea which is commented in bigcell code at the bottom, if that is uncommented the buttons 4 of them stop being clicked. Any solutions....