White Areas Outside of Flickable(?)

[aek3450]

Hello guys, i am trying to make an ui. I chosed my colour and tried it literally every where (creating rectangles at everywhere to set colour ) to get rid of white areas around days. I could not find the reason what causing this, do you know anything about it?

Here is my main code (i believe the problem is here).

import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQml 2.12
import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2
import "components"


ApplicationWindow {
    id: applicationWindow
    visible: true
    width: 960
    height: 540
    title: qsTr("App")

    Column {
        id: mission
        width: 2*parent.width/5
        height: parent.height
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom

        ScrollView {
            id: scrollView
            anchors.fill: parent

            ListView {
                width: parent.width
                model: Missioninfo{}
                delegate: Missiondelegate{}
            }
        }
    }

    Column {
        id: weather
        width: 3*parent.width/5
        height: parent.height
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom

        ScrollView{
            id:deneme
            anchors.fill: parent

            Flickable {
                id: flickable
                anchors.fill: parent
                contentHeight: root.implicitHeight
                boundsBehavior: Flickable.OvershootBounds

                Pane {
                    id: root
                    width: weather.width
                    height: weather.height
                    anchors.fill: parent
                    clip: true


                    Column {
                        //                        anchors.right: parent.right
                        anchors.fill: parent
                        anchors.verticalCenter: parent.verticalCenter

                        //                    Label {
                        //                        anchors { left: parent.left; right: parent.right }
                        //                        topPadding: 10
                        //                        bottomPadding: 10
                        //                        font.pixelSize: 20
                        //                        horizontalAlignment: Qt.AlignHCenter
                        //                        text: qsTr("Example")
                        //                    }

                        Repeater {
                            model: Weatherinfo{}
                            delegate:
                                Column {
                                property bool showList: false
                                anchors.left: parent.left
                                anchors.right: parent.right

                                Rectangle{
                                    property bool showList: false
                                    color: "#232A3B"
                                    width:parent.width
                                    height: applicationWindow.height/7
                                    anchors.left: parent.left
                                    anchors.right:  parent.right

                                    Label{
                                        text:qsTr(model.day)
                                        anchors.centerIn: parent
                                        color:"white"
                                    }

                                    MouseArea{
                                        anchors.fill: parent
                                        onClicked: paneSettingsList.shown = !paneSettingsList.shown
                                    }
                                }

                                Pane {
                                    id: paneSettingsList

                                    // ## relevant part ##
                                    property bool shown: false
                                    visible: height > 0
                                    height: shown ? implicitHeight : 0
                                    Behavior on height {
                                        NumberAnimation {
                                            easing.type: Easing.InOutQuad
                                        }
                                    }
                                    clip: true
                                    // ## relevant part ##
                                    Material.background: "#293145"
                                    padding: 0
                                    anchors.left: parent.left
                                    anchors.right: parent.right

                                    Column {
                                        anchors.right: parent.right
                                        anchors.left: parent.left

                                        Repeater {
                                            id: listSettings1
                                            model:details
                                            delegate: Weatherdelegate{}
                                        }
                                    }
                                }
                            }
                        }

                    }
                }
            }

            ScrollIndicator.vertical: ScrollIndicator { }

        }
    }
}

[sierdzio]

I think your Flickable does nothing... it's contents are the same size as the Flickable (because you have anchors.fill: parent in your root Pane. So it will never scroll. What actually does the scrolling in your case is the ScrollView.

I don't see any reason for the white padding in your code. Perhaps all those Pane components insert some platform-dependent padding? Try overriding their background property with a custom Rectangle.

[aek3450]

@sierdzio Thanks for answering, overriding worked. Also for your information, i am a beginner so may be wrong but without ScrollView, it still can be scrolled.