Spinbox of QtQuick control2 looks weird in TableView

tham

As the title mentioned, it looks weird

#include <QApplication>
#include <QQuickWidget>
#include <QQuickStyle>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QQuickStyle::setStyle("Universal");
    QUrl const url("qrc:/main.qml");

    QQuickWidget widget(url);
    widget.show();

    return a.exec();
}

QQuickStyle::setStyle("Universal");

main.qml

import QtQuick 2.9
import QtQuick.Controls 1.4 as Control1
import QtQuick.Controls 2.2 as Control2

import QtQuick.Layouts 1.3

Rectangle{
    id: root

    width: 600
    height: 480


    ListModel {
        id: sourceModel

        ListElement{ imageSelector: 0}
    }

    ColumnLayout{
        anchors.fill: parent

        Control1.TableView {
            id: tableView

            frameVisible: false
            sortIndicatorVisible: false

            Layout.minimumWidth: 400
            Layout.minimumHeight: 240
            Layout.preferredWidth: 600
            Layout.preferredHeight: 400
            Layout.fillWidth: true

            rowDelegate: Item{
                width: 150
                height: 50
            }

            Control1.TableViewColumn {
                id: imageSelector
                title: qsTr("Select face(s)")
                role: "imageSelector"
                movable: false
                resizable: true
                width: 150
                delegate: Control2.SpinBox{
                    from: 0
                    to: 10
                    value: styleData.value
                }
            }

            model: sourceModel
        }
    }
}

Tried to adjuts the size of rowDelegate, but it do not fix the issue.

The result:

alt text

It become normal again if I resize the column manually(by mouse)

alt text

How could I solve this issue?Thanks

ps : resizeColumnsToContents() do not work as expected

tham

@tham Found a solution, wrap the spinBox by RowLayout can solve this issue

Control1.TableViewColumn {
                id: imageSelector
                title: qsTr("Select face(s)")
                role: "imageSelector"
                movable: false
                resizable: true
                width: 150
                delegate: RowLayout{
                    Control2.SpinBox{
                        from: 0
                        to: 10
                        value: styleData.value
                    }
                }
            }