How to elide text in TextEdit

[Qyrychen]

hi All!
There is Qml model and TableView in my application.
TextEdit is used in delegate for text displaying (I use this element because I will use QSyntaxHighlighter with it)
Also I use wrapMode: Text.NoWrap

After column width changing I want get elide string (like ThisIsATex... for example)
I use TextMetrics for text eliding (http://doc.qt.io/qt-5/qml-qtquick-te...tml#width-prop)

onWidthChanged: {
                        textMetrics.text = delegateTextEdit.text
                        textMetrics.elideWidth = delegateTextEdit.width - 10
                        var str = textMetrics.elidedText
                        console.debug(str)
 
                        //delegateTextEdit.text = str
                    }

onWidthChanged: {
                        textMetrics.text = delegateTextEdit.text
                        textMetrics.elideWidth = delegateTextEdit.width - 10
                        var str = textMetrics.elidedText
                        console.debug(str)

                        //delegateTextEdit.text = str
                    }

To copy to clipboard, switch view to plain text mode 

Problem:
- on width changing I can see correct elide text in console (in TableView it doesn't appear)
qml_log.png
- after last line uncommented I see text only at first column in my table. Yes, text is elided but only in one way
qml_log1.jpg

[anda_skoa]

You will need a property that holds the actual text and use that as the input for your elide calculation.
You can probably use the elidedText as the input for the TextEdit though.

Something like

TextEdit {
    id: delegateTextEdit
 
    property string fullText: model.text
    text: deletateTextEditMetrics.elidedText
 
    TextMetrics {
        id: delegateTextEditMetrics
 
        text: delegateTextEdit.fullText
        elideWidth: delegateTextEdit.width - 10
    }
}

TextEdit {
    id: delegateTextEdit

    property string fullText: model.text
    text: deletateTextEditMetrics.elidedText

    TextMetrics {
        id: delegateTextEditMetrics

        text: delegateTextEdit.fullText
        elideWidth: delegateTextEdit.width - 10
    }
}

To copy to clipboard, switch view to plain text mode 

Cheers,
_

[Qyrychen]

Fixed/ My code
TextMetrics {
id: textMetrics
elide: Text.ElideRight

function getElidedText(originalText, maxWidth){
if(originalText != undefined){
text = originalText
elideWidth = maxWidth
return elidedText
}
}
}

TextEdit{
//...
wrapMode: Text.NoWrap

onWidthChanged: {
text = textMetrics.getElidedText(styleData.value, width)
}

onVisibleChanged: {
text = textMetrics.getElidedText(styleData.value, width)
}

[anda_skoa]

Did the declarative approach not work?

Cheers,
_

[joko]

Hi @anda_skoa i did what you suggested above however, i seems have a problem with android.
I found out that the elideWidth (TextInput.width - 10) is not enough to elide the text, when I tried deducting 200 from the width, it works fine.
Btw, the provided example works perfectly in iOS.

posted here is the sample code.

Any advise? Thanks.

[anda_skoa]

Maybe 10 is not enough offset, e.g. there could be margin or padding that is platform style specific, etc.

Cheers,
_

[joko]

Maybe 10 is not enough offset, e.g. there could be margin or padding that is platform style specific, etc.

Cheers,
_

Thanks for the reply.

I was able to resolved the issue by explicitly setting the font.pointSize in Android.