Dynamic height of tableviewcolumn according to text length
-
text overflows by the length of the text.
hello I have the following problem I am working with qt quick control 1.4 because the tableview of 2.15 does not adapt correctly as I would like; the table overflows in height and my question is the following can you make a dynamic height and that can be adding say 15 to the default heightexample: the default height is 50
can you add 15 or 10 depending on the length of the text?
import QtQuick.Window 2.15 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 import QtQuick.Window 2.2 ApplicationWindow { title: qsTr("TableView example") id: root width: 500 height: 400 visible: true //[!addrowdata] ///////////////////////////// ListModel { id: tablemode ListElement { number: "1" elevation_Max:"90000" elevation_Min:"50" length:"52-73\n122-163\n200-264\n280-317" depth:"8636-8900" } ListElement { number: "2" elevation_Max:"8000" elevation_Min:"21" length:"0-57\n119-166\n206-264" depth:"12700-13462" } } TableView{ id :tableView anchors.fill: parent alternatingRowColors : false TableViewColumn { role: "number" title: "Number" width: tableView.viewport.width/tableView.columnCount horizontalAlignment: Text.AlignHCenter } TableViewColumn { role: "elevation_Max" title: "Elevation Max" width: tableView.viewport.width/tableView.columnCount horizontalAlignment: Text.AlignHCenter } TableViewColumn { role: "elevation_Min" title: "Elevation Min" width: tableView.viewport.width/tableView.columnCount horizontalAlignment: Text.AlignHCenter } TableViewColumn { role: "length" title: "Length" width: tableView.viewport.width/tableView.columnCount horizontalAlignment: Text.AlignHCenter } TableViewColumn { role: "depth" title: "Depth" width: tableView.viewport.width/tableView.columnCount horizontalAlignment: Text.AlignHCenter } model: tablemode //Custom header proxy headerDelegate:Rectangle{ color: "#0A1B2D" width: 100; height: 40 border.color: "white" Text{ anchors.centerIn : parent text: styleData.value color: "#ffffff" font.pixelSize: 15 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } } //The line agent can modify the line height information rowDelegate: Rectangle { height: 50 // problem text protrudes out of the row color: "#052641" anchors.leftMargin: 2 } itemDelegate: Rectangle{ id: rectangle border.color: "white" border.width: 1 color : styleData.selected ? "#white": "#394755" //Extern Text { anchors.centerIn : parent anchors.leftMargin: 5 color : "#ffffff" width: parent.width height: parent.height text: styleData.value font.pixelSize: 14 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter wrapMode: Text.WordWrap } } style: TableViewStyle{ textColor: "white" highlightedTextColor: "#00CCFE" //Selected color backgroundColor : "#f5f5f5" frame: Rectangle { border{ color: "#00000000" // color of the border } } handle: Rectangle { implicitWidth: 10 implicitHeight: 10 radius:20 color: "#052641"//indicador en movimiento border.color:"#00000000" } scrollBarBackground: Rectangle { implicitWidth: 10 implicitHeight: 10 color: "#00000000" border.color:"#00000000" } decrementControl: Rectangle { implicitWidth: 10 implicitHeight: 10 color: "#00000000" border.color:"#00000000" } incrementControl: Rectangle { implicitWidth: 10 implicitHeight: 10 color: "#00000000" border.color:"#00000000" } } } } code_textI have looked for different solutions and none of them fits the text, if you could help me I have been struggling with this for days I would appreciate it in advance.
-
text overflows by the length of the text.
hello I have the following problem I am working with qt quick control 1.4 because the tableview of 2.15 does not adapt correctly as I would like; the table overflows in height and my question is the following can you make a dynamic height and that can be adding say 15 to the default heightexample: the default height is 50
can you add 15 or 10 depending on the length of the text?
import QtQuick.Window 2.15 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 import QtQuick.Window 2.2 ApplicationWindow { title: qsTr("TableView example") id: root width: 500 height: 400 visible: true //[!addrowdata] ///////////////////////////// ListModel { id: tablemode ListElement { number: "1" elevation_Max:"90000" elevation_Min:"50" length:"52-73\n122-163\n200-264\n280-317" depth:"8636-8900" } ListElement { number: "2" elevation_Max:"8000" elevation_Min:"21" length:"0-57\n119-166\n206-264" depth:"12700-13462" } } TableView{ id :tableView anchors.fill: parent alternatingRowColors : false TableViewColumn { role: "number" title: "Number" width: tableView.viewport.width/tableView.columnCount horizontalAlignment: Text.AlignHCenter } TableViewColumn { role: "elevation_Max" title: "Elevation Max" width: tableView.viewport.width/tableView.columnCount horizontalAlignment: Text.AlignHCenter } TableViewColumn { role: "elevation_Min" title: "Elevation Min" width: tableView.viewport.width/tableView.columnCount horizontalAlignment: Text.AlignHCenter } TableViewColumn { role: "length" title: "Length" width: tableView.viewport.width/tableView.columnCount horizontalAlignment: Text.AlignHCenter } TableViewColumn { role: "depth" title: "Depth" width: tableView.viewport.width/tableView.columnCount horizontalAlignment: Text.AlignHCenter } model: tablemode //Custom header proxy headerDelegate:Rectangle{ color: "#0A1B2D" width: 100; height: 40 border.color: "white" Text{ anchors.centerIn : parent text: styleData.value color: "#ffffff" font.pixelSize: 15 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } } //The line agent can modify the line height information rowDelegate: Rectangle { height: 50 // problem text protrudes out of the row color: "#052641" anchors.leftMargin: 2 } itemDelegate: Rectangle{ id: rectangle border.color: "white" border.width: 1 color : styleData.selected ? "#white": "#394755" //Extern Text { anchors.centerIn : parent anchors.leftMargin: 5 color : "#ffffff" width: parent.width height: parent.height text: styleData.value font.pixelSize: 14 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter wrapMode: Text.WordWrap } } style: TableViewStyle{ textColor: "white" highlightedTextColor: "#00CCFE" //Selected color backgroundColor : "#f5f5f5" frame: Rectangle { border{ color: "#00000000" // color of the border } } handle: Rectangle { implicitWidth: 10 implicitHeight: 10 radius:20 color: "#052641"//indicador en movimiento border.color:"#00000000" } scrollBarBackground: Rectangle { implicitWidth: 10 implicitHeight: 10 color: "#00000000" border.color:"#00000000" } decrementControl: Rectangle { implicitWidth: 10 implicitHeight: 10 color: "#00000000" border.color:"#00000000" } incrementControl: Rectangle { implicitWidth: 10 implicitHeight: 10 color: "#00000000" border.color:"#00000000" } } } } code_textI have looked for different solutions and none of them fits the text, if you could help me I have been struggling with this for days I would appreciate it in advance.
@Laito Unfortunately I almost forgot about the old quick controls. Here is an idea of how you could do it with the new controls.
Note, I added a wrapper for spacing around the table, to show there is no overflowing:import QtQuick.Window 2.15 import QtQuick 2.15 import QtQuick.Controls 2.15 import Qt.labs.qmlmodels 1.0 ApplicationWindow { title: qsTr("TableView example") id: root width: 500 height: 400 visible: true Item { id: wrapper anchors.fill: parent anchors.margins: 20 HorizontalHeaderView { id: header z: 1 interactive: false syncView: tableView anchors.top: parent.top implicitHeight: 50 model: ["Number", "Elevation Max", "Elevation Min", "Length", "Depth"] delegate: Rectangle { implicitWidth: 100 implicitHeight: 50 color: "#0A1B2D" Text { anchors.fill: parent anchors.margins: 5 wrapMode: Text.Wrap text: modelData color: "#ffffff" font.pixelSize: 15 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } } } TableView { id: tableView anchors.fill: parent topMargin: header.implicitHeight columnSpacing: 1 rowSpacing: 1 clip: true flickableDirection: Flickable.VerticalFlick boundsBehavior: Flickable.StopAtBounds property int selectedRow: -1 model: TableModel { TableModelColumn { display: "number" } TableModelColumn { display: "elevation_Max" } TableModelColumn { display: "elevation_Min" } TableModelColumn { display: "length" } TableModelColumn { display: "depth" } rows: [{ "number": 1, "elevation_Max": 90000, "elevation_Min": 50, "length": "52-73\n122-163\n200-264\n280-317", "depth": "8636-8900" }, { "number": 2, "elevation_Max": 8000, "elevation_Min": 21, "length": "0-57\n119-166\n206-264\n119-166\n206-264\n119-166\n206-264\n119-166\n206-264", "depth": "12700-13462" }, { "number": 3, "elevation_Max": 8000, "elevation_Min": 21, "length": "0-57", "depth": "12700-13462" }, { "number": 3, "elevation_Max": 8000, "elevation_Min": 21, "length": "0-57", "depth": "12700-13462" }, { "number": 3, "elevation_Max": 8000, "elevation_Min": 21, "length": "0-57", "depth": "12700-13462" }, { "number": 3, "elevation_Max": 8000, "elevation_Min": 21, "length": "0-57", "depth": "12700-13462" }, { "number": 3, "elevation_Max": 8000, "elevation_Min": 21, "length": "0-57", "depth": "12700-13462" }, { "number": 3, "elevation_Max": 8000, "elevation_Min": 21, "length": "0-57", "depth": "12700-13462" }, { "number": 3, "elevation_Max": 8000, "elevation_Min": 21, "length": "0-57", "depth": "12700-13462" }, { "number": 3, "elevation_Max": 8000, "elevation_Min": 21, "length": "0-57", "depth": "12700-13462" }, { "number": 3, "elevation_Max": 8000, "elevation_Min": 21, "length": "0-57", "depth": "12700-13462" }, { "number": 3, "elevation_Max": 8000, "elevation_Min": 21, "length": "0-57", "depth": "12700-13462" }] } delegate: Rectangle { implicitWidth: 90 implicitHeight: content.implicitHeight color: tableView.selectedRow === row ? "#052641" : "#394755" MouseArea { anchors.fill: parent onClicked: tableView.selectedRow = row } Text { id: content width: parent.width padding: 10 text: display color: "#ffffff" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter wrapMode: Text.Wrap } } } } }