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" }
                }
    }
}

Answer 1

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: