barmalei / zebkit

JavaScript library that follows easy OOP concept, provides HTML5 Canvas based Rich UI and includes Java to JavaScript converter tool
Apache License 2.0
931 stars 177 forks source link

HtmlTextField can't works in modal window #184

Open Highmiao opened 4 years ago

Highmiao commented 4 years ago

I use HtmlTextField to input English or Chinese, which works normally under canvas. root, but when I use HtmlTextField in modal window, the text cannot be displayed normally. Is this related to the layer? let winLayer = canvas.getLayer(zebkit.ui.WinLayerMix.id);

    let win = new zebkit.ui.Window(
        'hello world',
        new zebkit.ui.web.HtmlTextField('hello world')
    );
    win.setBounds(10, 10, 500, 300);
    win.setSizeable(false);
    win.setBorder(new zebkit.draw.Border('gray', 1, 1));

I did a simple test, like the one above, where the text was not displayed in the input field.

Highmiao commented 4 years ago

I tried to solve the problem. The HtmlTextField can't display text because I put theHtmlTextField in the winLayer. let winLayer = canvas.getLayer(zebkit.ui.WinLayerMix.id); The depth of the winLayer is 10000, and the depth of the HtmlTextField is 0, so the text in the HtmlTextField is obscured. I solved the problem like this let html_text_field = new zebkit.ui.web.HtmlTextField(); html_text_field.element.parentNode.style['z-index'] = 10001;