BoxLayout background color in wrong position

Question

Given the layout below I expected the BoxLayout to be a 44px bar at the top of the screen with red background with two "Date time" labels. As shown in the screenshot, the labels are where they're expected (so the position of the box layout is correct), not so for the red background:

.

I'm sure I'm missing something obvious as this is the very first time I use Kivy and KV. I tried using canvas.{before, after} to no avail. What am I missing? Thanks in advance for any answers!

#:kivy 1.0
#
FloatLayout:    
    canvas:
        Color:
            # #263238
            rgb: 0x26 / 255.0, 0x32 / 255.0, 0x38 / 255.0

        Rectangle:
            size: self.size

    BoxLayout:
        canvas:
            Color:
                rgb: 1, 0, 0
            Rectangle:
                size: self.size

        orientation: 'horizontal'
        padding: 10
        spacing: 10
        size_hint: 1, None
        pos_hint: {'top': 1}
        height: 44

        Label:
            height: 24
            text_size: self.width, None
            text: 'Date time'

        Label:
            height: 24
            text_size: self.width, None
            text: 'Date time 2'

    Label:
        text: 'testing'

Edit: as per Totem's answer, adding pos: self.pos to BoxLayout canvas rectangle does the trick.

Answer 1

You're BoxLayout is where you intend it to be, as you mention. It's filled with two labels, which are also where they are meant to be. In order for the background of all this to look red, you could just make the labels backgrounds red. You've already made the BoxLayout red, it just can't be seen behind the labels, and I'm not entirely sure how to make those transparent(I'm sure it's possible). Learning kivy is really all about experimentation in the end, I think.

To make the labels have a red background(giving you the same effect), you probably could use their respective canvases, like you did with the BoxLayout, except using canvas.before. You wouldn't need to do it with either the float or box layouts then anymore.

From the comment: set the boxlayouts Rectangle position to pos: self.pos

Answer 2

I fixed the problem. See the red area in the figure. . In this section i add pos:self.pos after self.size look like.

Rectangle:
    size: self.size
    pos:self.pos

It should work.