How to set QML TableViewStyle to show Middle Ellipses (ElideMiddle)

TylerM

I'm creating a QML TableView and I want the text (in both the rows AND headers) to middle-ellipse whenever the text is too long to fit into its column. For example: This_is_really_long_text might display as This...text

I've got it successfully working without using a TableViewStyle, however I would like to use TableViewStyle to easily stylize multiple columns at once.

I've read the documentation for: - TableView QML (Item Delegate) - TableViewStyle QML Type - Item Delegate QML Type - Customizing QT Quick Controls (With Delegate)

I also tried making minor tweaks to some code on someone's previously asked question, simply swapping out the elide: Text.ElideRight for Text.ElideMiddle which also didn't work. It seems like changing the header color and height works, but not the elide.

The below code generates a table that does not show ellipses at all, though I expect middle-ellipses. If I remove the overrides, it will right-elide.

Image showing 2nd column cutting off 1st, but no ellipses

import QtQuick 2.9
import QtQuick.Controls 1.4 as QC1
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 2.2


ApplicationWindow {
    visible: true
    width: 400
    height: 400

    ListModel {
        id: myListModel
        ListElement {
            cell1Text: "This_is_some_really_long_text"
            cell2Text: "Shorter_text"
        }
    }

    QC1.TableView {
        id: tableView
        anchors.fill: parent
        model: myListModel

        QC1.TableViewColumn {
            role: "cell1Text"
            title: "Cell1Text"
        }

        QC1.TableViewColumn {
            role: "cell2Text"
            title: "Cell2Text"
        }

        style: TableViewStyle {

            Text {
                elide: Text.ElideMiddle
            }

            headerDelegate: Rectangle {
                height: 20
                color: "lightsteelblue"
                Text {
                    text: styleData.value
                    elide: Text.ElideMiddle
                }
            }

            rowDelegate: Rectangle {
                Text {
                    elide: Text.ElideMiddle
                }
            }

            itemDelegate: Rectangle {
                Text {
                    text: styleData.value
                    elide: Text.ElideMiddle
                }
            }
        }
    }
}

TylerM

I figured it out. I needed to add the width: parent.width to the delegates

        headerDelegate: Rectangle {
            height: 20
            color: "lightsteelblue"
            Text {
                width: parent.width
                text: styleData.value
                elide: Text.ElideMiddle
            }
        }

        itemDelegate: Rectangle {
            Text {
                width: parent.width
                text: styleData.value
                elide: Text.ElideMiddle
            }
        }