Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

TextInput - how to restrict width of text to parent's width



  • I have code

                        Rectangle
                        {
                            border.width: 1
    //                        color: "green"
                            Layout.fillWidth: true
    //                        Layout.fillHeight: true
                            Layout.minimumWidth: 20
                            Layout.minimumHeight: 20
                            TextInput
                            {
                                id: typeInfoLabel
                                width: parent.width
                                height: parent.height
                                maximumLength: 20
                                text: typeInfoString
                            }
                        }
    

    Generally everything is ok, but when I put longer text, then label is longer then should be. Look at screenshot. How to fix it?

    537a0f93-f5f1-4f77-bb06-2e1b8ede4bae-obraz.png



  • Please post a better code snippet. I cannot reproduce what is shown in your image.



  • When you run app, please put longer text and set smaller width and then you will see it

    import QtQuick.Window 2.15
    import QtQuick.Controls 1.4
    import QtQuick.Layouts 1.15
    import QtQuick 2.15
    import QtQml 2.15
    
    
    Window
    {
        id: alarmListWindow
    
        width: 400
        height: 400
    
        property string remainingInfoString: "Remaining: " + "model.remainingTime"
        property string typeInfoString: "Type: " + "model.remainingTime"
        property string messageInfoString: "Message: " + "model.remainingTime"
    
        ListModel
        {
            id: modelID
    
    //        ListElement
    //        {
    //            idAlarm: 0
    //            remainingTime: 0
    //            typeAlarm: ""
    //            messageAlarm: ""
    //        }
        }
        Component
        {
            id: delegatID
            Rectangle
            {
                id: alarmItemDelegate
                width: listviewID.width
                height: 35
                border.width: 1
    //            radius: 5
    
                color: ListView.isCurrentItem ? "grey" : "transparent"
                Text
                {
                    id: remainingAl
                    x: 5
                    anchors.top: parent.top
                    text: "Remaining: " + model.remainingTime
                    color: alarmItemDelegate.ListView.isCurrentItem ? "yellow" : "black"
                    font.pixelSize: (parent.height/2)-2
                }
                Text
                {
                    id: typeAl
                    x: 5
    //                anchors.verticalCenter: parent.verticalCenter
                    anchors.bottom: parent.bottom
                    text: "Type: " + model.typeAlarm
                    color: alarmItemDelegate.ListView.isCurrentItem ? "yellow" : "black"
                    font.pixelSize: (parent.height/2)-2
                }
    //            Text
    //            {
    //                id: messageAl
    //                x: 5
    //                anchors.bottom: parent.bottom
    //                text: "message: " + model.messageAlarm
    //                color: alarmItemDelegate.ListView.isCurrentItem ? "yellow" : "black"
    //            }
                function getTimerID()
                {
                    return idAlarm
                }
            }
        }
        ColumnLayout
        {
            anchors.fill: parent
            Text
            {
                id: headerAlarmListLabel
                width: parent.width
                height: 70
                text: qsTr("Lista alarmow")
            }
    
            RowLayout
            {
                Rectangle
                {
                    border.width: 1
    
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.minimumWidth: 50
                    Layout.maximumWidth: parent.width/2
                    Layout.minimumHeight: parent.height/2
                    ListView
                    {
                        id: listviewID
                        spacing: 5
                        clip: true
                        anchors.fill: parent
    
    //                    Layout.fillHeight: true
    //                    width: 200
    
                        model: modelID
                        delegate: delegatID
    
                        MouseArea
                        {
                            anchors.fill: parent
                            onClicked: setCurrentItem(mouseX, mouseY)
                        }
                    }
                }
                ColumnLayout
                {
                    ColumnLayout
                    {
                        spacing: 2
                        Rectangle
                        {
                            border.width: 1
    //                        color: "green"
                            Layout.fillWidth: true
    //                        Layout.fillHeight: true
                            Layout.minimumWidth: 20
                            Layout.minimumHeight: 20
                            TextInput
                            {
                                id: remainingInfoLabel
                                text: remainingInfoString
                            }
                        }
                        Rectangle
                        {
                            border.width: 1
    //                        color: "green"
                            Layout.fillWidth: true
    //                        Layout.fillHeight: true
                            Layout.minimumWidth: 20
                            Layout.minimumHeight: 20
                            TextInput
                            {
                                id: typeInfoLabel
                                width: parent.width
                                height: parent.height
                                maximumLength: 20
                                text: typeInfoString
                            }
                        }
                        Rectangle
                        {
                            border.width: 1
    //                        color: "green"
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Layout.minimumWidth: 20
                            Layout.minimumHeight: 20
                            TextEdit
                            {
                                id: messageInfoLabel
                                width: parent.width
                                height: parent.height
                                text: messageInfoString
                            }
                        }
                    }
                    Button
                    {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        Layout.minimumWidth: 20
                        Layout.minimumHeight: 20
                        Layout.maximumHeight: 40
                        text: "Delete alarm"
    
                        onClicked:
                        {
                            if (modelID.count > 0 && listviewID.currentIndex != -1)
                            {
                                var index = 0
                                for (var alarm of list_of_alarms)
                                {
                                    console.log("listviewID.currentItem.getTimerID(): " + listviewID.currentItem.getTimerID())
                                    console.log("alarm.getTimerID(): " + alarm.getTimerID())
                                    console.log("index: " + index)
    
                                    if (alarm.getTimerID() === listviewID.currentItem.getTimerID())
                                    {
                                        list_of_alarms.splice(index,1)
                                        modelID.remove(listviewID.currentIndex)
                                        console.log("=======================")
                                        console.log("listviewID.currentItem.getTimerID(): " + listviewID.currentItem.getTimerID())
                                        console.log("alarm.getTimerID(): " + alarm.getTimerID())
                                        console.log("index: " + index)
                                        console.log("=======================")
                                    }
                                    index++
                                }
                            }
                        }
                    }
                }
            }
        }
    
        Timer
        {
            id: timerUpdateListView
            interval: 1000; running: true; repeat: true; triggeredOnStart: true
            onTriggered: updateListView()
        }
        function updateListView()
        {
    
            if (list_of_alarms.length !== modelID.count)
            {
                modelID.clear()
                for (var alarm of list_of_alarms)
                {
                    modelID.append( {"idAlarm":alarm.getTimerID(), "remainingTime": alarm.convertSecondsIntoDaysAndTime(alarm.getRemainingTime()), "typeAlarm": alarm.getTypeAlarm(), "messageAlarm": alarm.getMessage()} )
                }
            }
            else
            {
                var index = 0
    
                if (modelID.count === 0)
                {
                    remainingInfoString = ""
                    typeInfoString = ""
                    messageInfoString = ""
                }
    
                for (var alarm of list_of_alarms)
                {
                    if (listviewID.currentIndex === index)
                    {
                        remainingInfoString = alarm.convertSecondsIntoDaysAndTime(alarm.getRemainingTime())
                        typeInfoString = alarm.getTypeAlarm()
                        messageInfoString = alarm.getMessage()
                    }
                    else if (listviewID.currentIndex === -1)
                    {
                        remainingInfoString = ""
                        typeInfoString = ""
                        messageInfoString = ""
                    }
    
                    modelID.setProperty(index, "remainingTime", alarm.convertSecondsIntoDaysAndTime(alarm.getRemainingTime()) )
                    index++
                }
            }
        }
    
        function setCurrentItem(x, y)
        {
            var index = listviewID.indexAt(x, y)
            listviewID.currentIndex = index
        }
    }
    
    
    

    2daef42e-4a8d-430d-823a-9e696dcd33f7-obraz.png



  • Both code snippets do not run for me, sorry I can't help.

    Okay, I made your second code snippet run, I needed to add 'visible: true' to Window.

    However, I still cannot reproduce your problem, the text does not behave the way you are showing, in fact, it seems to be correct. I did as you said, by putting in plenty of text, which I did to the maximum, below is what I get;

    Capture.JPG



  • Enter 20 times letter "W" and next resize app to be smaller (especially width).

    Full app -> https://github.com/pawlosck/QMLClock



  • Problem solved. I had to add option clip=true into TextInput. After that, text is not expanded beyond border of Rectangle.
    https://github.com/pawlosck/QMLClock/commits/0c2e21ddd26dd9b59130f858b399b7fd8de662d8

                        Rectangle
                        {
                            id: typeInfoBorder
                            border.width: 1
    //                        color: "green"
                            Layout.fillWidth: true
                            Layout.minimumWidth: 40
                            height: 20
                            TextInput
                            {
                                id: typeInfoLabel
                                width: parent.width
                                height: parent.height
                                clip: true
                                text: typeInfoString
    
                                onTextChanged:
                                {
                                    var index = 0
                                    for (var alarm of list_of_alarms)
                                    {
                                        if (alarm.getTimerID() === listviewID.currentItem.getTimerID())
                                        {
                                            alarm.setTypeOfAlarm(text)
                                        }
                                    }
                                }
                            }
                        }
    

Log in to reply