View Single Post
qwazix's Avatar
Moderator | Posts: 2,622 | Thanked: 5,447 times | Joined on Jan 2010
#10
Originally Posted by hotnikkelz View Post
I tried to get a search box that occupies almost the length of the header, but I think it is a bit messy, also the height is an arbitrary height I put. Is there a cleaner way to achieve this? It's quite hardcoded ratch right now. The default textfield element that the SDK provides is probably like half the width of the screen....here's the code
Code:
Page {
    tools: commonTools

    Label {
        id: label
        anchors.centerIn: parent
        text: qsTr("Hello world!")
        visible: false
    }

    Rectangle {
        id: header
        height: 72
        width: parent.width
        color: "light blue"

        Rectangle {
        id: boundbox
        height: 50
        anchors.centerIn: parent
        width: 448
        color: "transparent"

            TextField {
                id: searchBox
                placeholderText: "Search"
                maximumLength: 80
                anchors.fill: boundbox
               }
           }
    }
}
Code:
Page {
    tools: commonTools

    Label {
        id: label
        anchors.centerIn: parent
        text: qsTr("Hello world!")
        visible: false
    }
    Column{
        Rectangle {
            id: header
            height: 72
            width: parent.width
            color: "light blue"

            TextField {
                id: searchBox
                placeholderText: "Search"
                width: 448
                maximumLength: 80
                anchors.centerIn: parent
            }
        }

        NextElement{
        }
     }
}
It looks good to me, try the above code, maybe it will work with fewer lines. You just need to wrap everything in a column, so that the next element goes below your search box (without column, they are going to overlap)
__________________
Proud coding competition 2012 winner: ρcam
My other apps: speedcrunch N9 N900 Jolla –– contactlaunch –– timenow

Nemo UX blog: Grog
My website: qwazix.com
My job: oob
 

The Following User Says Thank You to qwazix For This Useful Post: