ajaxorg / ace

Ace (Ajax.org Cloud9 Editor)
https://ace.c9.io
Other
26.69k stars 5.28k forks source link

core: resize missbehaviour #5599

Closed hcasse closed 3 months ago

hcasse commented 3 months ago

Describe the bug

I'm developing a Python-based backend for UI-like web display. I have implement equivalent of tabbed pane and in one of this tab, an ACE editor is embedded. At first display of the page, all is ok. I change the tab and then I come back to the ACE editor tab, its covers the whole browser window.

I have attempted several updates method together : editor.resize(), editor.udpateAll() with forcing and this does not change the display at all.

Basically, the browser UI is built using "display: flex" and the ACE editor is itself put inside a "display! flex" container with "align-items: stretch" and and "flew-grow: 1" to cover the whole surface.

I have tried two methods to hide and show the tabs with the same buggy behavior of ACE:

Any fast idea or do I need provide more details? The application is quite large and I would to synthesize by hand a smaller example in this case.

Expected Behavior

Editor to be resized.

Current Behavior

Editor occupies the whole window.

Reproduction Steps

Depending on the response above.

Possible Solution

No response

Additional Information/Context

No response

Ace Version / Browser / OS / Keyboard layout

1.35.0/Firefox/Linux/Azerty

nightwing commented 3 months ago

Ace takes up only the space that the container div would take up if the editor was not created. As a quick way to debug you can try to disable the editor, and verify that the container you are creating has the same problem.

If you could provide an example, i'd be glad to help you to debug it.

Btw. it for tabs it is better to use seSession method and not create many editor instances.

hcasse commented 3 months ago

I will try to do a simple example (not so easy because I have to mix a little behavior I can isolate in C++).

Anyway, interesting remark : both the edition area and line number area are extended to the whole window size while the original "div" container keeps the original right size. In my memory, both of them have a "position: absolute". Don't if it's normal.

Another effect I just remarked is that highlighting of code disappeared.

nightwing commented 3 months ago

maybe the stylesheet added by ace gets removed? or position: relative on ace container is removed?

hcasse commented 3 months ago

Ok, thank you, I find the bug causing this bad behavior (partially in my code). Each element of the tab has a style class depending if it ".active" or ".inactive". This class is set by the server by sending an XHR message to the server and there is a transient state where the hidden tab (ACE one) receives a class where ".active" and ".inactive" are set together.

Thank you a lot, I found it in synthesizing my small example.