Make sure the form width fills first

1 files changed, 112 insertions, 116 deletions

diff --git a/CheckoutFlickable.ui.qml b/CheckoutFlickable.ui.qml
index 0a2610a..e22083b 100644
--- a/CheckoutFlickable.ui.qml
+++ b/CheckoutFlickable.ui.qml
@@ -14,7 +14,7 @@ Flickable {
 	property alias checkoutAddress: address
 	contentHeight: personal.height
 
-	Item {
+	ColumnLayout {
 		id: personal
 		anchors {
 			top: parent.top
@@ -22,141 +22,137 @@ Flickable {
 			right: parent.right
 		}
 
-		ColumnLayout {
+		RowLayout {
+			id: alert
+			Layout.alignment: Qt.AlignHCenter
+			Label {
+				text: qsTr("Already have an account?")
+			}
+			Text {
+				id: login
+				text: "<a href=\"sign-in.html\">Log in</a>"
+				font.underline: false
+			}
+		}
 
-			RowLayout {
-				id: alert
-				Layout.alignment: Qt.AlignHCenter
+		GridLayout {
+			ColumnLayout {
 				Label {
-					text: qsTr("Already have an account?")
+					text: qsTr("Your name *")
+					Layout.fillWidth: true
 				}
-				Text {
-					id: login
-					text: "<a href=\"sign-in.html\">Log in"
-					+ "</a>"
-					font.underline: false
+				TextField {
+					id: name
+					placeholderText: qsTr("Name")
+					Layout.fillWidth: true
 				}
+
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
 			}
 
-			GridLayout {
-				ColumnLayout {
-					Label {
-						text: qsTr("Your name *")
-						Layout.fillWidth: true
-					}
-					TextField {
-						id: name
-						placeholderText: qsTr("Name")
-						Layout.fillWidth: true
-					}
-
-					Layout.topMargin: 16
-					Layout.leftMargin: 8
-					Layout.rightMargin: 8
+			ColumnLayout {
+				Label {
+					text: qsTr("Email address *")
+					Layout.fillWidth: true
 				}
-
-				ColumnLayout {
-					Label {
-						text: qsTr("Email address *")
-						Layout.fillWidth: true
-					}
-					TextField {
-						id: email
-						placeholderText: qsTr("Email")
-						Layout.fillWidth: true
-					}
-
-					Layout.topMargin: 16
-					Layout.leftMargin: 8
-					Layout.rightMargin: 8
+				TextField {
+					id: email
+					placeholderText: qsTr("Email")
+					Layout.fillWidth: true
 				}
 
-				ColumnLayout {
-					Label {
-						text: qsTr("Mobile number *")
-						Layout.fillWidth: true
-					}
-					TextField {
-						id: mobile
-						placeholderText: qsTr("Mobile number")
-						Layout.fillWidth: true
-					}
-
-					Layout.topMargin: 16
-					Layout.leftMargin: 8
-					Layout.rightMargin: 8
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
+			}
+
+			ColumnLayout {
+				Label {
+					text: qsTr("Mobile number *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					id: mobile
+					placeholderText: qsTr("Mobile number")
+					Layout.fillWidth: true
 				}
 
-				ColumnLayout {
-					Label {
-						text: qsTr("Select country *")
-						Layout.fillWidth: true
-					}
-					TextField {
-						id: country
-						placeholderText: qsTr("Select country")
-						Layout.fillWidth: true
-					}
-
-					Layout.topMargin: 16
-					Layout.leftMargin: 8
-					Layout.rightMargin: 8
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
+			}
+
+			ColumnLayout {
+				Label {
+					text: qsTr("Select country *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					id: country
+					placeholderText: qsTr("Select country")
+					Layout.fillWidth: true
 				}
 
-				ColumnLayout {
-					Label {
-						text: qsTr("Select state *")
-						Layout.fillWidth: true
-					}
-					TextField {
-						id: province
-						placeholderText: qsTr("Select state")
-						Layout.fillWidth: true
-					}
-
-					Layout.topMargin: 16
-					Layout.leftMargin: 8
-					Layout.rightMargin: 8
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
+			}
+
+			ColumnLayout {
+				Label {
+					text: qsTr("Select state *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					id: province
+					placeholderText: qsTr("Select state")
+					Layout.fillWidth: true
 				}
 
-				ColumnLayout {
-					Label {
-						text: qsTr("Postal code *")
-						Layout.fillWidth: true
-					}
-					TextField {
-						id: postal
-						placeholderText: qsTr("PIN code")
-						Layout.fillWidth: true
-					}
-
-					Layout.topMargin: 16
-					Layout.leftMargin: 8
-					Layout.rightMargin: 8
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
+			}
+
+			ColumnLayout {
+				Label {
+					text: qsTr("Postal code *")
+					Layout.fillWidth: true
 				}
+				TextField {
+					id: postal
+					placeholderText: qsTr("PIN code")
+					Layout.fillWidth: true
+				}
+
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
+			}
 
-				ColumnLayout {
-					Label {
-						text: qsTr("Address *")
-						Layout.fillWidth: true
-					}
-					TextField {
-						id: address
-						placeholderText: qsTr("Address")
-						Layout.fillWidth: true
-					}
-
-					Layout.topMargin: 16
-					Layout.leftMargin: 8
-					Layout.rightMargin: 8
+			ColumnLayout {
+				Label {
+					text: qsTr("Address *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					id: address
+					placeholderText: qsTr("Address")
+					Layout.fillWidth: true
 				}
 
-				width: parent.width
-				columns: width < 786 ? 1 : 2
-				rows: width < 786 ? 4 : 7
-				columnSpacing: 0
-				rowSpacing: 0
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
 			}
+
+			width: parent.width
+			columns: width < 786 ? 1 : 2
+			rows: width < 786 ? 4 : 7
+			columnSpacing: 0
+			rowSpacing: 0
 		}
 	}
 }