Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

core: resize missbehaviour #5599

Closed
hcasse opened this issue Jun 23, 2024 · 4 comments
Closed

core: resize missbehaviour #5599

hcasse opened this issue Jun 23, 2024 · 4 comments

Comments

@hcasse
Copy link

hcasse commented Jun 23, 2024

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:

  • shown: "display: block"; hidden: "display: none".
  • shown: "display: block"; hidden: "display: block position: absolute; left: -10000px; right: -10000px".

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

@hcasse hcasse changed the title (module name): (short issue description) core: resize missbehaviour Jun 23, 2024
@nightwing
Copy link
Member

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
Copy link
Author

hcasse commented Jun 23, 2024

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
Copy link
Member

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

@hcasse
Copy link
Author

hcasse commented Jun 24, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants