Cocos2d-js EditBox zOrder not working

Question

I have an EditBox on my layer.

var ebox = new cc.EditBox(cc.p(200, 30));
ebox.setPosition(size.width / 2 - 50, size.height / 2);
ebox.setPlaceHolder("Password");
ebox.setInputFlag(cc.EDITBOX_INPUT_FLAG_PASSWORD);
ebox.setDelegate(this);
ebox.setFontColor({"r": 0, "g": 0, "b": 0});
ebox.setFontSize(20);
ebox.initWithBackgroundColor(cc.size(200, 30), {"r": 0, "g": 255, "b": 0});
ebox.init();

this.addChild(ebox, 1); //this - is a main layer

then I have to display some kind of overlay over the main layer

this.getParent().addChild(overlayLayer, 100);

overlayLayer - layer filled with color

The thing is that editbox stays always above the overlay. Why isn't zOrder working with EditBox??

Why don't you add it to the same layer as the box? this.addChild(overlayLayer, 100); — Michael, Aug 08 '14 at 15:28

score 0 · Answer 1 · answered Aug 13 '14 at 05:46

I get the same problem with your code. My solution is a workaround. You can use sprites as background. Then it works.

    var ebox = cc.EditBox.create(cc.size(170, 50), cc.Scale9Sprite.create("res/extensions/green_edit.png"), cc.Scale9Sprite.create("res/extensions/orange_edit.png"));
    ebox.setPlaceHolder("Password");
    ebox.setInputFlag(cc.EDITBOX_INPUT_FLAG_PASSWORD);
    ebox.setPosition(cc.p(size.width/2,size.height/2));
    ebox.setFontColor({"r": 0, "g": 0, "b": 0});
    ebox.setDelegate(this);
    this.addChild(ebox,1);

Cocos2d-js EditBox zOrder not working

1 Answers1