How to display TextField at the bottom of the screen

Question

I want to display a TextField at the bottom of the screen in QML for SailfishOS.

I attempted multiple tries but the TextField is always at the top of the screen.

import QtQuick 2.0
import Sailfish.Silica 1.0

ApplicationWindow {
     id: screen
     anchors.fill: parent
    Item {
        width: parent.width;
        anchors.bottom: screen.bottom
        TextField {
            width: parent.width;
            anchors.bottom: screen.bottom
            id: input
            placeholderText: "URL"
            inputMethodHints: Qt.ImhNoPredictiveText
            validator: RegExpValidator { regExp: /^[a-zA-Z]{3,}$/ }
        }
    }
}

NG_ · Accepted Answer · 2015-02-15T11:24:06.703

Kaymaz, in common, your question is not related to SailfishOS. And you was almost right, but made several errors in your code. You can use this code:

// Its desktop version, and everyone can run it. It will be easy 
// to insert correct includes for SailfishOS
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Window 2.2

ApplicationWindow {
    id: appWindow

    // Explicitly set window size (just for testing on desktop)
    width: 200
    height: 400

    // Item that represents "main application rectangle"
    // it will contain all child items
    Item {
        id: root
        anchors.fill: parent

        TextField {
            id: input
            anchors {
                left: parent.left
                right: parent.right
                bottom: root.bottom
            }
            placeholderText: "URL"
            inputMethodHints: Qt.ImhNoPredictiveText
            validator: RegExpValidator { regExp: /^[a-zA-Z]{3,}$/ }
        }
    }
}

I do not recommend use folibis's approach for several reasons:

If you can use anchors in QML -- use it.
Avoid unnamed constants (like 30).
Such code becomes hard to read (I mean, if it is more than 20 lines).
Imagine, that your TextField's height change -- you got need to change y: screen.height - 30. So this kind of code becomes hard to maintain.
Do not write code thinking "I can improve this later". Write good code.

No need to reinvent the wheel if you can just walk. Or, in accordance with Occam's razor - the fewer assumptions that are made, the better. You insert additional `Item` so this construction is became totally non-semantic. As for my solution - you can change it to `y: screen.height - height` and so all you may need to change here is `height`. — folibis, Feb 12 '15 at 23:45
I also updated my answer. If you say it's hard to read ... hmm, I just have nothing to argue. — folibis, Feb 12 '15 at 23:51
@troyane It works as expected, thanks. But I've a litlle bit more of lines and I cannot make it work... Can you have a look please? http://pastebin.com/xKzFLEFu — Kaymaz, Feb 13 '15 at 09:05
@Kaymaz if you have new question -- it is better to open new question with detailed description — NG_, Feb 13 '15 at 10:07

folibis · Answer 2 · 2015-02-12T23:49:06.957

-2

Try this:

ApplicationWindow {
    id: screen
    width: 400
    height: 300

    TextField {
        width: screen.width
        y: screen.height - height
        placeholderText: "URL"
    }
}

edited Feb 12 '15 at 23:49

answered Feb 12 '15 at 11:37

folibis

12,048
6
54
97

I found it out at the same time...odd stuff! Hopefully, it should work with landscape. One small thing: I use ´anchors.fill: parent´ so it takes all the screen – Kaymaz Feb 12 '15 at 13:42
2

It would also work with anchoring...it was the outer `Item` to generate the visual error...always prefer anchoring to absolute positioning. – BaCaRoZzo Feb 12 '15 at 13:54
I do not recommend use this approach. See answer below. – NG_ Feb 12 '15 at 17:07

How to display TextField at the bottom of the screen

2 Answers2