Overflow not working with scrollablePanel

[ngodinhdai286]

I am using scrollablePanel and when I scroll to left or right, items are not hidden Here is my code ` const menuHeight = 60 const menuWidth = bgPinkWidth * 0.999

    let config: any = {
        x: 0,
        y: 0,
        width: menuWidth,
        height: menuHeight,
        scrollMode: 'x',
        background: this.add.image((this.lw - menuWidth) / 2, 0, "ui", "ui/bg-menu-option.png"),
        panel: {
            child: createObject(this),
            mask: { padding: 1 },
            space: {
                left: 20, right: 20, top: 20, bottom: 20,
                panel: 10
            },
            expand: {
                panel: true
            },
            align: {
                panel: 'center'
            }
        },
    }

    const scrollPanel = this.rexUI.add.scrollablePanel(config).layout()

    this.mainContainer.add(scrollPanel)

    this.mainContainer.setPosition((this.screenWidth - this.lw) / 2, this.backBtn.y + this.backBtn.height / 2 + 20)

const createObject = (scene: any) => { const sizer = scene.rexUI.add.sizer({ orientation: 'x', space: { item: 20 }, })

for (const element of listMenu) {
    console.log(element);
    sizer.add(
        scene.rexUI.add.label({
            height: 30,
            space: { left: 10, right: 10, top: 10, bottom: 10 },
            // background: scene.rexUI.add.roundRectangle({ color: "white", strokeColor: COLOR_LIGHT, radius: 10 }),
            icon: scene.add.image(0, 0, "ui", `ui/${element.texture}.png`),
        }),
        { expand: true }
    )
}
return sizer;

} `

[rexrainbow]

I don't get your use case. Please post a simplest, runnable test code. Using codepen is a kind of solution.

[ngodinhdai286]

I am handling UI for character's bag I am using your plugins UI ScrollablePanel to create Menu options I create a mainContainer to cover all item in the picture, when I add scrollablepanel to main container, the children of the panel don't hide when scrolling to left or right, it's just on the white background Below is my code for MyBag UI ` import Phaser from "phaser" import { PADDING_TOP, TOP_BTN_X, TOP_BTN_Y, listMenu } from "../constant"; import UIPlugin from "phaser3-rex-plugins/templates/ui/ui-plugin"; export default class MyBag extends Phaser.Scene { private screenWidth: number = 0 private screenHeight: number = 0 private lw: number = 0 private lh: number = 0 private container!: Phaser.GameObjects.Container private mainContainer!: Phaser.GameObjects.Container private characterContainer!: Phaser.GameObjects.Container private backBtn!: Phaser.GameObjects.Image private rexUI!: UIPlugin

constructor() {
    super("MyBag");
}

initUI() {
    this.container.removeAll(true)

    this.faceList = []
    this.skinList = []
    this.trouserList = []
    this.shirtList = []
    this.hatList = []
    this.shoeList = []
    this.accessoryList = []

    const whiteBg = this.add.graphics().fillStyle(0xffffff, 1).fillRect(0, 0, this.screenWidth, this.screenHeight)
    this.container.add(whiteBg)

    const padding = 20
    this.backBtn = this.add.image(0, 0, "ui", "ui/back-btn.png").setInteractive()
    this.backBtn.x = (this.screenWidth - Math.min(0.9 * this.screenWidth, 750)) / 2 + TOP_BTN_X
    this.backBtn.y = TOP_BTN_Y
    this.container.add(this.backBtn)

    let lh = this.screenHeight - TOP_BTN_Y - this.backBtn.height
    const mainHeight = lh * 0.4

    this.backBtn.on('pointerdown', () => {
        console.log("click click");
    })

    // main container
    this.mainContainer = this.add.container()

    // main graphics
    const mainGraphics = this.add.graphics()
    mainGraphics.fillStyle(0xD9D9D9, 1).fillRoundedRect(0, 0, this.lw, mainHeight, 20)

    this.mainContainer.add(mainGraphics)

    // avatar
    const bgAvatar = this.add.image(0, 0, "ui", "ui/bg-avatar.png")
    bgAvatar.y = TOP_BTN_Y + padding
    bgAvatar.x = TOP_BTN_Y + padding
    const avatar = this.add.image(0, 0, "ui", "ui/avatar.png")
    avatar.y = TOP_BTN_Y + padding
    avatar.x = TOP_BTN_Y + padding
    this.mainContainer.add([bgAvatar, avatar])

    // sex
    const femaleBtn = this.add.image(0, 0, "ui", "ui/female.png").setInteractive()
    femaleBtn.x = bgAvatar.x + bgAvatar.width / 2 + padding * 2
    femaleBtn.y = bgAvatar.height / 2
    femaleBtn.on('pointerdown', () => {
        console.log("female clicked");
    })

    const maleBtn = this.add.image(0, 0, "ui", "ui/male.png").setInteractive()
    maleBtn.x = femaleBtn.x + femaleBtn.width - 10
    maleBtn.y = femaleBtn.y + femaleBtn.height / 2 - 10
    maleBtn.on('pointerdown', () => {
        console.log("male clicked");
    })

    this.mainContainer.add([maleBtn, femaleBtn])

    // nickname
    const nickname = this.add.text(0, 0, "Noo DiDa", { "align": "center", "color": "#000000", "fontFamily": "Arial", "fontSize": "25px", "fontStyle": "normal", "stroke": "#000000" })
    nickname.x = padding
    nickname.y = bgAvatar.height + padding * 2

    const editBtn = this.add.image(0, 0, "ui", "ui/changeBtn.png")
        .setOrigin(0.5, 0)
        .setInteractive()
    editBtn.x = nickname.width + padding * 2
    editBtn.y = nickname.y
    editBtn.on("pointerdown", () => {
        console.log("edit name");
    })

    this.mainContainer.add([nickname, editBtn])

    // bgPower
    const bgPower = this.add.image(0, 0, "ui", "ui/power.png").setInteractive()
    bgPower.x = this.lw - bgPower.width / 2 - 10
    bgPower.y = nickname.y + 10

    const power = this.add.text(bgPower.x + padding, bgPower.y, "Thể lực 100%", { "align": "center", "color": "#ffffff", "fontFamily": "Arial", "fontSize": "25px", "fontStyle": "normal" }).setOrigin(0.5)

    this.mainContainer.add([bgPower, power])

    // bgLevel
    const bgLevel = this.add.image(0, 0, "ui", "ui/level.png").setInteractive()
    bgLevel.x = bgPower.x - bgPower.width - 10
    bgLevel.y = nickname.y + 10

    const level = this.add.text(bgLevel.x + padding, bgLevel.y, "Level 1", { "align": "center", "color": "#ffffff", "fontFamily": "Arial", "fontSize": "25px", "fontStyle": "normal" }).setOrigin(0.5)

    this.mainContainer.add([bgLevel, level])

    // bgCoin
    const bgCoin = this.add.image(0, 0, "ui", "ui/coin-bg.png").setInteractive()
    bgCoin.x = this.lw - bgCoin.width / 2 - padding * 2
    bgCoin.y = femaleBtn.y
    const coin = this.add.text(bgCoin.x + padding, bgCoin.height, "500", { "align": "center", "color": "#ffffff", "fontFamily": "Arial", "fontSize": "30px", "fontStyle": "bold" }).setOrigin(0.5)

    this.mainContainer.add([bgCoin, coin])

    // bg_pink
    const bgPinkHeight = mainHeight * 0.6
    const bgPinkWidth = this.lw * 0.95
    const bgPinkGraphics = this.add.graphics()
    bgPinkGraphics.fillStyle(0xC3B2B2, 1).fillRoundedRect(0, 0, bgPinkWidth, bgPinkHeight, 20)
    bgPinkGraphics.y = bgLevel.y + bgLevel.height
    bgPinkGraphics.x = (this.lw - this.lw * 0.95) / 2

    this.mainContainer.add([bgPinkGraphics])

    // options choice
    const menuHeight = 60
    const menuWidth = bgPinkWidth * 0.999
    // const bgMenu = this.add.graphics()
    // // bgMenu.fillStyle(0xffffff, 1).fillRoundedRect(0, 0, menuWidth, menuHeight, 20)
    // bgMenu.x = (this.lw - menuWidth) / 2
    // bgMenu.y = bgPinkGraphics.y + bgPinkHeight - menuHeight - 3

    let config: any = {
        x: menuWidth / 2 + padding,
        y: bgPinkGraphics.y + bgPinkHeight - menuHeight + padding,
        width: menuWidth,
        height: menuHeight,
        scrollMode: 'x',
        background: this.add.image((this.lw - menuWidth) / 2, 0, "ui", "ui/bg-menu-option.png"),
        panel: {
            child: createObject(this),
            mask: { padding: 1 },
            space: {
                left: 20, right: 20, top: 20, bottom: 20,
                panel: 10
            },
            expand: {
                panel: true
            },
            align: {
                panel: 'center'
            }
        },
        space: {
            sliderX: 0,

        }
    }

    const scrollPanel = this.rexUI.add.scrollablePanel(config).layout().setOrigin(0.5, 0.5)

    this.mainContainer.add(scrollPanel)

    // menu choice

    this.mainContainer.setPosition((this.screenWidth - this.lw) / 2, this.backBtn.y + this.backBtn.height / 2 + 20)

    this.container.add(this.mainContainer)

    // Character container
    this.characterContainer = this.add.container()
    const characterGraphics = this.add.graphics()

    characterGraphics.fillStyle(0xD9D9D9, 1).fillRoundedRect(0, 0, this.lw, lh * 0.55, 20)
    this.characterContainer.add(characterGraphics)

    // character
    const player = this.add.image(0, 0, "player", "")
    player.x = this.lw / 2
    player.y = characterGraphics.y + player.height / 2 + padding * 2

    // shadow
    const shadow = this.add.image(0, 0, "ui", "ui/shadow.png")
    shadow.y = player.height + padding * 2
    shadow.x = this.lw / 2

    this.characterContainer.add([shadow, player])
    this.characterContainer.setPosition((this.screenWidth - this.lw) / 2, this.mainContainer.y + lh * 0.4 + 20)
    this.container.add(this.characterContainer)

}

create() {
    this.screenWidth = this.scale.baseSize.width
this.screenHeight = this.scale.baseSize.height
    this.lw = Math.min(0.9 * this.screenWidth, 750)
    this.lh = Math.min(0.9 * this.screenHeight, 1624)
    this.container = this.add.container()
    this.scale.on('resize', this.resizeGame, this)
    this.initUI();
}

resizeGame() {
    console.log("onResize");
this.screenWidth = this.scale.baseSize.width
this.screenHeight = this.scale.baseSize.height
this.lw = Math.min(0.9 * this.screenWidth, 750)
this.lh = Math.min(0.9 * this.screenHeight, 1624)
    this.initUI()
}

}

const createObject = (scene: any) => { const sizer = scene.rexUI.add.sizer({ orientation: 'x', space: { item: 20 }, })

for (const element of listMenu) {
    console.log(element);
    sizer.add(
        scene.rexUI.add.label({
            height: 30,
            space: { left: 10, right: 10, top: 10, bottom: 10 },
            icon: scene.add.image(0, 0, "ui", `ui/${element.texture}.png`),
        }),
        { expand: true }
    )
}
return sizer;

}

`

[rexrainbow]

Built-in container (mainContainer in this case) does not work well with scrollablePanel because of incorrect mask position. See this issue