I have a side stack panel in my Babylon scene that I place on the left of the screen, and sometimes I click on the button and the click registers and the button works fine and out of nowhere sometimes I try to click it again and it doesn’t register the click. Sometimes in the panel ill be hovering right over the button and it wont even be highlighted.
I even tried changing the button type and still face the same issue.
Please does anyone have an idea about this?
Hey there!
First recommendation is I’d love to see a playground or maybe a snippet of your code just to be 100% sure. My hypothesis is that use need to add this little extra line of code to you button:
button.isPointBlocker = true;
Heyy @msDestiny14
I tried adding that but im still facing the same problem. I wont be able to add my app to a playground but I could show you a snippet of the code. Still, when I try to click on the button, it wont register and will instead move the camera.
var sidePanelInside = new GUI.StackPanel();
sidePanelInside.isVertical = true;
sidePanelInside.isPointerBlocker = true;
sidePanelInside.width = “100px”;
sidePanelInside.background = “transparent”;
sidePanelInside.paddingRight = 15;
sidePanelInside.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_CENTER;
sidePanelInside.horizontalAlignment = GUI.Control.VERTICAL_ALIGNMENT_LEFT;
var sidePanelOutside = new GUI.StackPanel();
sidePanelOutside.isVertical = true;
sidePanelOutside.isPointerBlocker = true;
sidePanelOutside.width = "100px";
sidePanelOutside.background = "transparent";
sidePanelOutside.paddingRight = 10;
sidePanelOutside.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_CENTER;
sidePanelOutside.horizontalAlignment = GUI.Control.VERTICAL_ALIGNMENT_LEFT;
sidePanelOutside.addControl(sidePanelInside);
advancedTexture.addControl(sidePanelOutside);
var addShapeButton = GUI.Button.CreateImageOnlyButton(“but1”, addIcon);
addShapeButton.isPointBlocker = true;
addShapeButton.isPointerBlocker = true;
addShapeButton.paddingBottom = 5;
addShapeButton.background = “rgba(255, 255, 255, 0.5)”;
addShapeButton.width = “50px”;
addShapeButton.cornerRadius = 10;
addShapeButton.height = “50px”;
addShapeButton.color = “white”;
addShapeButton.outlineColor = “white”;
addShapeButton.outlineWidth = 50;
addShapeButton.onPointerUpObservable.add(() => {
headerText1.text = “Choose a Character”;
});
sidePanelInside.addControl(addShapeButton);
@Jad_Matta it will be really hard to troubleshoot for us without a playground which not putting your snippet there ?
@sebavan @msDestiny14
I tried to add the snippet and adjust the playground to give you a better idea of what I mean.
As you can see in the playground I have a side panel on the left that consists of 4 buttons, and sometimes when I click on the buttons they don’t register the click and instead the camera is moved.
https://playground.babylonjs.com/#0WEPZZ#2
It might seem to be working all the time in the playground, but it sure isn’t in my application.
If it works in the playground it means it is not related to the gui and adding little by little the code of your app we should able to repro the behavior.
Are you using the latest preview version as well in your app ?
@sebavan Im sorry but what do you mean by preview version? Do you mean the latest version of babylon? The application I am building is a react-babylon application
Yes for the babylon part, be sure to rely on version 5.0.0-alpha.55 and not 4.2.0 also double check you do not have other dom elements in front of your canvas capturing the clicks.
alright thank you for your help. I will make sure of that