Search code examples
qtqmlqt5qtquick2qtquickcontrols2

shift the textfield edit area

I have a qml based application where I have a search field. The field also has an icon to indicate it is a search box. The problem is that when I type the text it overlaps the icon and I would like to basically constrain the text input area to the text field which does not contain the image.

The qml code is as follows:

TextField {
        id: searchBox
        font.pixelSize: 18
        background: Rectangle {
            radius: 6
            border.color: "#707070"
            border.width: 1

            Image {
                source: "../images/search.png"
                anchors.left: parent.left
                anchors.leftMargin: 12
                anchors.verticalCenter: parent.verticalCenter
            }
        }
    }

The resulting component is rendered as follows:

enter image description here

As you can see the text input area overlaps with the image. Is there a way to ensure that the text input area gets clipped or in this case shifted to the right and that the user cannot add text where the image is rendered?

Solution

  • You can use padding properties

    rightPadding: 30
leftPadding: 24