coverActionArea missing top padding on small cover

asked 2018-10-06 23:48:15 +0300

pisarz1958 gravatar image

updated 2018-10-09 18:35:24 +0300

I'm trying to design a nice cover page for an app I'm working on (Hutspot). I have a component anchored to the top of coverActionArea. I added a red rectangle component to demonstrate the issue.


As you can see, on the left (small cover) it's missing top padding. To make matters worse, size property on Cover component is always returning the same value (maybe I just don't understand how it works?) so I have no clue how to detect this in my code. This means, I can either have an ugly, unnecessary padding added or missing padding with more than 4 apps open.

EDIT:Code from the screenshot:

I debugged the issue, apparently cover itself is scaled down (makes sense) but it's done in such a way, the app itself is not made aware of that in any way. Buttons keep original size (makes sense), but after scaling everything else down, proportions are completely different. This is probably the easiest way to reproduce this issue:

CoverBackground {
    Rectangle {
        anchors.fill: coverActionArea
        z: 3
        color: "blue"

    CoverActionList {
        CoverAction { iconSource: "image://theme/icon-cover-previous-song" }
        CoverAction { iconSource: "image://theme/icon-cover-pause" }

Notice what's happening after tapping on one of the cover actions. Background behind the button does not align with the blue box.

edit retag flag offensive close delete



Show us your code

Edz ( 2018-10-08 16:16:42 +0300 )edit

@Edz I updated the post with an example code.

pisarz1958 ( 2018-10-09 18:36:23 +0300 )edit

Hmm, I've tried a lot of variations, but none are yielding the desired result. Might be worth posting this on TMO.

Edz ( 2018-10-10 15:18:37 +0300 )edit