Checkbox becomes big when clicked on in QML tableview

Question

This code does produce checkboxes in a tableview but when I click on the checkbox it becomes big. I want it to remain of a constant size.

Please guide.

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.1

Rectangle
{
    id: rightside
    anchors.fill: parent
    height: parent.height
    width: 1500

    TableView
    {
        anchors.fill: parent

        TableViewColumn
        {
            role: "selectall"
            title: "Select All"
            width: 100

            delegate:   CheckBox
                        {
                            anchors.fill: parent
                            checked: false
                        }
        }

        TableViewColumn {
            role: "size"
            title: "Size"
            width: 100
        }

        TableViewColumn
        {
            role: "last_updated"
            title: "Last Updated"
            width: 100
            delegate: Component
                        {
                            Rectangle
                            {
                                height: 100
                                width: 120
                                id: head
                                RowLayout
                                {
                                    height: parent.height
                                    width: parent.width
                                    Rectangle
                                    {
                                        height: 20
                                        width: 20
                                        color: "red"
                                        border.color: "black"
                                        radius: 100
                                        MouseArea
                                        {
                                            anchors.fill: parent
                                            onClicked: parent.color = "grey"
                                        }
                                    }
                                }
                            }
                        }


        }

        model: ListModel
                {
                    id: mymodel
                    ListElement { text: "Banana" }
                    ListElement { text: "Apple" }
                    ListElement { text: "Coconut" }
                }
    }
}

Side note: You're importing both QtQuick.Controls 1 & 2 at the same time. You can run into name collisions with that. See here. — JarMan
Are you sure they are actually resizing? It kind of looks like they're just overlapping each other? Maybe when you click on one checkbox, it just gets drawn on top of the others so it looks bigger? — JarMan

tro tro · Accepted Answer · 2020-11-12T10:18:00

There are lots of way to solve your problem. But first, let's do proper distinction between Qt Qtuick Controls versions. To do it, use this import statement:

import QtQuick.Controls 1.4 as QC1

And respectively use all components that requires QC1, e.g.: QC1.TableView, QC1.TableViewColumn.

In your example you are getting overlapping of components. To avoid it in terms of QC1 you can define a higher row delegate for your TableView. But this discards the default style. Simple example of its usage with style goes here:

rowDelegate: Rectangle {
  height: 30
  SystemPalette {
    id: myPalette
    colorGroup: SystemPalette.Active
  }
  color: {
    var baseColor = styleData.alternate ? myPalette.alternateBase : myPalette.base
    return styleData.selected ? myPalette.highlight : baseColor
  }
}

As result you'll get this:

Another option in terms of QC2 is to redefine indicator style of CheckBox. Below you'll find an example that could possibly fit your app, based on Customizing CheckBox documentation; so your CheckBox delegate will look like this:

delegate: CheckBox {
  id: control
  anchors.fill: parent
  checked: false

  indicator: Rectangle {
    id: outer
    readonly property int size: 18
    implicitWidth: size
    implicitHeight: size
    x: control.leftPadding
    y: parent.height / 2 - height / 2
    radius: 4
    border.color: control.down ? "orangered" : "orange"

    Rectangle {
      id: inner
      anchors.centerIn: parent
      width: outer.size/2
      height: width
      radius: 3
      color: control.down ? "orangered" : "orange"
      visible: control.checked
    }
  }
}

As result you'll get this:

Checkbox becomes big when clicked on in QML tableview

1 Answers