How can I make a table with 6 rows 5 tables and 25 TextInput boxes, with background.

I've tried almost everything to put an background to the TextInput boxes, but still I could not get it right.

My code for the TextInput box is there:

TextInput {
    y: 20;
    font.pixelSize: 10
    text: "Computador"
    cursorVisible: true;
    border.color: "#c0c0c0"
}

How can I make them and put a background color to them?

up vote 3 down vote accepted

To get a background with such elements, prefer the TextField component instead (I suggested a similar usage in this answer).

enter image description here

The corresponding code:

import QtQuick 2.0
import Ubuntu.Components 0.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

MainView {
    id: main
    width: 400
    height: 300

    Column {
        spacing: units.gu(2)
        anchors.centerIn: parent
        TextInput {
            text: "default TextInput"
            cursorVisible: false
            width: main.width - units.gu(25)
        }
        TextField {
            placeholderText: "default TextField"
            width: main.width - units.gu(25)
        }
        TextField {
            placeholderText: "TextField with background"
            width: main.width - units.gu(25)
            text: "TextField with background"
            style: TextFieldStyle {
                textColor: "black"
                background: Rectangle {
                    radius: 5
                    color: "orange"
                    implicitWidth: 100
                    implicitHeight: 24
                    border.color: "#333"
                    border.width: 1
                }
            }
        }
    }
}
  • Sylvain thank you so much for all your help :). – Diogo Figueira Jul 7 '14 at 11:43
  • Sylvain can you give me some opinion?? What should i use to make an app that needs to store int numbers, text-input or text-fields?? because i need 25 of them for an app that I'm building – Diogo Figueira Jul 7 '14 at 11:47
  • You could store all of them in a QML var property, see qt-project.org/doc/qt-5/qml-var.html. – Sylvain Pineau Jul 7 '14 at 11:49
  • yes but i use text input so users can input the number what would you suggest, continue using them or use text-fields?? – Diogo Figueira Jul 7 '14 at 12:03
  • I'm not sure to understand correctly. Could you create a new question detailing your use case please? – Sylvain Pineau Jul 7 '14 at 12:06

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.