Placing the submit button qml layout bb10 - c++

Question

I want to place the submit button below the colored box. What should I do to fix the layout?
Whenever I adjust the topPadding the whole covered box adjusts not the submit button
import bb.cascades 1.0
Page {
Container {
background: Color.create("#f9f7f2");
layout: StackLayout {}
// Container for holding the title
Container {
horizontalAlignment: HorizontalAlignment.Center
layout: DockLayout {}
ImageView {
horizontalAlignment: HorizontalAlignment.Fill
verticalAlignment: VerticalAlignment.Fill
imageSource: "asset:///images/navigation_bar.png"
}
Container {
horizontalAlignment: HorizontalAlignment.Right
rightPadding: 30
topPadding: 40
layout: DockLayout {}
ImageButton {
id: btnsettings
verticalAlignment: VerticalAlignment.Center
defaultImageSource: "asset:///images/navbar_icon_settings.png"
onClicked: {
// show settings page when the button is clicked
cppObj.onSettingsClicked();
}
}
}
}
Container {
topPadding: 20
leftPadding: 20
rightPadding: 20
bottomPadding: 20
background: Color.create("#F4E9E1");
horizontalAlignment: HorizontalAlignment.Fill
layout: StackLayout {}
Label {
verticalAlignment: VerticalAlignment.Center
horizontalAlignment: HorizontalAlignment.Left
text: "Add Projects"
textStyle {
// fontFamily: FontStyle.Default.Myriad
// fontSize: 36
color: Color.create("#60323C")
}
}
}
ScrollView {
scrollViewProperties {
scrollMode: ScrollMode.Vertical
}
Container {
verticalAlignment: VerticalAlignment.Center
horizontalAlignment: HorizontalAlignment.Center
Divider {}
Container {
rightPadding: 30
leftPadding: rightPadding
bottomPadding: 40
topPadding: 20
verticalAlignment: VerticalAlignment.Bottom
layout: DockLayout {}
ImageView {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
topMargin: 40
imageSource: "asset:///images/create_project_frame.png"
}
Container {
horizontalAlignment: HorizontalAlignment.Center
leftPadding: 70
rightPadding: 70
topPadding: 60
Label {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
text: qsTr("Create a Project")
}
}
Container {
leftPadding: 70
rightPadding: 70
topPadding: 150
TextField {
id: tfMemberName
input.submitKey: SubmitKey.Next
topPadding: 50
hintText: qsTr("project name")
}
}
Container {
rightPadding: 30
leftPadding: rightPadding
bottomPadding: 20
verticalAlignment: VerticalAlignment.Bottom
layout: DockLayout {}
ImageView {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
topMargin: 40
imageSource: "asset:///images/add_member_frame.png"
}
Container {
horizontalAlignment: HorizontalAlignment.Center
leftPadding: 70
rightPadding: 70
topPadding: 60
Label {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
text: qsTr("Add a Member")
}
}
Container {
leftPadding: 70
rightPadding: 70
topPadding: 150
TextField {
id: tfEmail
input.submitKey: SubmitKey.Next
topPadding: 40
hintText: qsTr("email address")
}
}
Container {
horizontalAlignment: HorizontalAlignment.Left
verticalAlignment: VerticalAlignment.Center
topPadding: 250
leftPadding: 180
layout: DockLayout {}
ImageButton {
id: btnaddmore
defaultImageSource: "asset:///images/button_add.png"
onClicked: {
controller.showProjectsPage(); /*var projectsPage = page.createObject();
navPane.push(projectsPage);*/
}
}
}
Container {
horizontalAlignment: HorizontalAlignment.Right
rightPadding: 250
topPadding: 310
Label {
horizontalAlignment: HorizontalAlignment.Right
text: qsTr("add more")
}
}
}
}
}
ImageButton {
id: btnsubmit
horizontalAlignment: HorizontalAlignment.Center
defaultImageSource: "asset:///images/button_submit.png"
}
}
}
/*actions: [
ActionItem {
title: qsTr ("Add Project")
imageSource: "asset:///images/actionbar_icon_add.png"
ActionBar.placement: ActionBarPlacement.OnBar
/*onTriggered: {
_projects.addProjects()
navigationPane.push(addProjects.createObject())
}
}
]*/
}
I want to achieve this look

Answer 1

If I got you right, this code
import bb.cascades 1.0
Page {
// [0]
Container {
background: Color.Gray
topPadding: 40
leftPadding: 20
rightPadding: leftPadding
bottomPadding: topPadding
layout: StackLayout {
}
// [1]
Container {
leftPadding: 40
rightPadding: leftPadding
background: Color.Red
maxHeight: 350
// [2]
Container {
layoutProperties: StackLayoutProperties {
spaceQuota: 1.5
}
Label {
horizontalAlignment: HorizontalAlignment.Center
text: "Add a Member"
}
TextField {
horizontalAlignment: HorizontalAlignment.Center
hintText: "email address"
}
} // [2]
Container {
layoutProperties: StackLayoutProperties {
spaceQuota: 1
}
horizontalAlignment: HorizontalAlignment.Center
Container {
layout: StackLayout {
orientation: LayoutOrientation.LeftToRight
}
Button {
text: "+"
}
Label {
verticalAlignment: VerticalAlignment.Center
text: "add more"
}
}
}
} //[1]
Button {
horizontalAlignment: HorizontalAlignment.Center
text: "Button submit"
}
} // [0]
}
will give you the following layout:
Simply replace Buttons with your custom ImageButtons