I got an interesting suggestion on how to better resolve my issue with code in the ACE code editor going invisible when the window is resized (or the JavaScript console is opened). I have noticed over the last few days that, under certain circumstances, the code was still going invisible, so this seems like an opportune time to revisit.
The crux of the fix is setting the container element to be absolutely positioned with the top, bottom, left, and right positions all set to zero:
#editor, #preview {
margin: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}I suppose this is not such much a fix as it is the proper, suggested settings. Anyhow...With the proper suggested settings in place, I have to remove a bunch of code that attempted to resize and display the editor. Much of it was my vain attempts to force the code to be visible after resizing it, but some of it was in the original code editor implementation for the CodeMirror editor.
So I remove the on-zoom hack and the resize hack. I also remove various dynamically set styles. Once all that is done...
Nothing changes.
It still mostly works, but I can force the code to go invisible with a little bit of effort. And then I realize... I have not disabled the appcache on the editor. D'oh!
I remove the manifest attribute from the main entry into the application:
<html manifest="editor.appcache">The I remove the appcache entry itself from
chrome://appcache-internals/. With that, a reload shows me that everything is working. The editor is rock-solid on resize, without so much as a flicker.Problem solved, only now that I have really refreshed the application, I see the web worker error from last night that I had thought was not a problem:
So it looks to be back to drawing board.
At least I was able to get one problem solved. Not surprisingly, continuing to add cruft on top of existing styling cruft only made the situation work. Much thanks to \*/ for pointing out a minimal and much more robust solution.
Day #
No comments:
Post a Comment