Cant place Rectangle on the ScrollingFrame in stack

[zhoujunhua91]

i found this topic

that is a know issue with the current setup and there is a workaround, I should have mentioned that here
you need to place your widget that you need to interact with into a “dragable” placer
you placer need to be of fixed size and position so it wont have to move but it will enable the input system to reachout

                with ui.Placer(draggable=True):
                    ui.Button("this Work")

if that doesn’t just fix it share a little more of the code around your widget and we will get you a solution

is this problem solved?

[mati-nvidia]

I’m not sure. I think that was in the context of widgets on the viewport. It might be better if you describe or share a code snippet of what you’re trying to do.

[zhoujunhua91]

self._window = ui.Window("My Window", width=300, height=300)
        with self._window.frame:
            with ui.ZStack():
                
                with ui.ScrollingFrame(
                    height=425,
                    horizontal_scrollbar_policy=ui.ScrollBarPolicy.SCROLLBAR_ALWAYS_OFF,
                    vertical_scrollbar_policy=ui.ScrollBarPolicy.SCROLLBAR_ALWAYS_ON,
                ):
                    with ui.VGrid(column_width=100, row_height=100):
                        for i in range(100):
                            with ui.ZStack():
                                ui.Rectangle(
                                    style={
                                        "border_color": 0xFF6A6A6A,
                                        "background_color": 0xFFA8A8A8,
                                        "border_width": 1,
                                        "margin": 0,
                                    }
                                )
                                ui.Label(f"{i}", style={"margin": 5})

                with ui.VStack():
                    label = ui.Label("")

                    def on_click():
                        self._count += 1
                        label.text = f"count: {self._count}"

                    def on_reset():
                        self._count = 0
                        label.text = "empty"

                    on_reset()

                    with ui.HStack():
                        ui.Button("Add", clicked_fn=on_click)
                        ui.Button("Reset", clicked_fn=on_reset)
                 
                ui.Rectangle(width=80, style={"background_color": 0x220000FF})
                

the red Rectangle should be on the top

[mati-nvidia]

Thank you! I have two different approaches. I wonder which one applies more to what you want to do.

ZStack Rectangle over ScrollingFrame contents:

import omni.ui as ui

my_window = ui.Window("Example Window", width=300, height=300)
with my_window.frame:
    with ui.ZStack():
        
        with ui.ScrollingFrame(
            height=425,
            horizontal_scrollbar_policy=ui.ScrollBarPolicy.SCROLLBAR_ALWAYS_OFF,
            vertical_scrollbar_policy=ui.ScrollBarPolicy.SCROLLBAR_ALWAYS_ON,
        ):
            with ui.ZStack():
                with ui.VGrid(column_width=100, row_height=100):
                    for i in range(100):
                        with ui.ZStack():
                            ui.Rectangle(
                                    style={
                                        "border_color": 0xFF6A6A6A,
                                        "background_color": 0xFFA8A8A8,
                                        "border_width": 1,
                                        "margin": 0,
                                    }
                            )
                            ui.Label(f"{i}", style={"margin": 5})
                ui.Rectangle(height=ui.Percent(100), width=ui.Percent(50), style={"background_color": ui.color.red})

        with ui.VStack():
            label = ui.Label("")

OR Rectangle over ScrollingFrame:

import omni.ui as ui

my_window = ui.Window("Example Window", width=300, height=300)
with my_window.frame:
    with ui.ZStack():
        with ui.ScrollingFrame(
            height=425,
            horizontal_scrollbar_policy=ui.ScrollBarPolicy.SCROLLBAR_ALWAYS_OFF,
            vertical_scrollbar_policy=ui.ScrollBarPolicy.SCROLLBAR_ALWAYS_ON,
        ):
            with ui.VGrid(column_width=100, row_height=100):
                for i in range(100):
                    with ui.ZStack():
                        ui.Rectangle(
                                style={
                                    "border_color": 0xFF6A6A6A,
                                    "background_color": 0xFFA8A8A8,
                                    "border_width": 1,
                                    "margin": 0,
                                }
                        )
                        ui.Label(f"{i}", style={"margin": 5})
                
        with ui.VStack():
            label = ui.Label("")
        ui.Rectangle(height=ui.Percent(100), width=ui.Percent(50), style={"background_color": ui.color.red})

Seems like the latter isn’t quite supported.