How to add a absolute positioned Rectangle to VerticalLayout/HorizontalLayout

[wspl]

I want to add an overlay or background that can ignore the parent's layout rules to a VerticalLayout/HorizontalLayout. How can I do that?

---

The original scene is that PopupWindow can only be extended by a sized element like VerticalLayout (a Rectange doesn't work). Therefore, I need my Content component to inherit VerticalLayout directly to give it a size. But I don't know how to create a background for my Content component.

I want to achieve this with the following code:

component Content inherits VerticalLayout {
  // I want this as a background!
  Rectangle {}
  // ...items...
}

PopupWindow {
    Content {}
}

However, I need to change my code to this to make it work.

PopupWindow {
  Rectangle {}
  VerticalLayout {}
}

I'm a web developer. Adding an absolutely positioned element to a container with layout rules is a very common scenario. Perhaps I'm missing some slint-ui features that can achieve this?

---

An additional question:

How can I create a Rectangle that adjusts its size based on its child elements without filling its parent size? I managed to achieve this by wrapping the Rectangle in a HorizontalLayout and using the alignment property to prevent it from filling. Is there a more elegant solution for this?

[ogoffart]

I think the following should work

component Content {
  // the background!
  Rectangle {}

  VerticalLayout {
      // ...items...
   }
}

How can I create a Rectangle that adjusts its size based on its child elements without filling its parent size?

you can use

        Rectangle {
            background: green;
            width: self.preferred-width;
            height: self.preferred-height;
            // contents
        }

==> Demo

[wspl]

I tried the following approach, but it seems to behave differently than when written directly in the PopupWindow. It does not take into account the size and position property in the PopupWindow, but instead centers in a strange place.

component Content {
  // the background!
  Rectangle {}

  VerticalLayout {
      // ...items...
   }
}

The code of PopupWindow:

popup := PopupWindow {
    x: 0;
    y: root.height;
    width: root.width;

    Content {}
}

↓

[ogoffart]

Maybe you need to wrap it in a layout, or write explicitly the height property.

[wspl]

Yes, having Content inherit Rectangle as a container, and setting a self.preferred-* size within it, can solve this issue. Thank you for your help.