Unsolved How to set QML TableViewStyle to show Middle Ellipses (ElideMiddle)
-
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 asThis...text
I've got it successfully working without using a
TableViewStyle
, however I would like to useTableViewStyle
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
forText.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 } } } } }
-
I figured it out. I needed to add the
width: parent.width
to the delegatesheaderDelegate: 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 } }