no text in ace editor [closed]

[BobDay]

strange... all of a sudden, all instances (edit pages, dashboard designer, json store editor...) of ace editor are NOT showing any text, however:

• underlying text is there, just hidden from view - can copy and paste in and out;
• occurs in all browsers (chrome, ff, safari);
• CSS is correct under inspector - and unable to change color: attribute;
• happened on 3.6.x - upgraded to 3.7.4, still occurring;
• user is superadmin;

Behavior - when entering editor instance for the first time in session, (eg, started process), the editor background blinks white for ~ 100ms, then displays blank. Note: ace_active-line background is as its css shows: #202020.

I'm stumped...

[MattFox]

Check the google console for errors/warnings. There may be a broken dependency or something out of whack

[BobDay]

...did. nothing out of the ordinary. very odd.

[MattFox]

Can you post a screenshot? Will be handy for one of the infinite chaps to see. I don't know what else to suggest here.

Fox

[BobDay]

sure. thanks...

[MattFox]

@bobday It says there are two errors in the console.

[BobDay]

@MattFox oops sorry... it only showed the warnings prior to this iteration...

[MattFox]

Let's start with ensuring disable caching is ticked under the network tab and refresh the page. Makes sure all the code used in mango that has been stored in the browser receives the spring cleaning treatment.
If you're still getting those errors, they are definitely a good place to start.

[BobDay]

caching is disabled... that was pilot error. Now only showing 2 warnings (IE errors) - no errors

Note selected text in editor (CMD-a)

[MattFox]

if you open up the elements in the ace editor, can you see your markup inside?

[BobDay]

well, not exactly. Ace appears to parse out the JSON into 'lines', concatenated with spans:

<div class="ace_line" style="height: 30px;">
    <span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt; 
       </span>
    <span class="ace_meta ace_tag ace_tag-name ace_xml">div</span>
    <span class="ace_text ace_tag-whitespace ace_xml"> </span>
    <span class="ace_entity ace_other ace_attribute-name ace_xml">class</span> 
   <span class="ace_keyword ace_operator ace_attribute-equals ace_xml">= 
       </span> 
   <span class="ace_string ace_attribute-value ace_xml">"ma-designer-root" 
       </span> 
   <span class="ace_text ace_tag-whitespace ace_xml"> </span>
   <span class="ace_entity ace_other ace_attribute-name ace_xml">id</span>
   <span class="ace_keyword ace_operator ace_attribute-equals ace_xml">= 
      </span> 
   <span class="ace_string ace_attribute-value ace_xml">"6d41eb7c-475e-48df- 
      9132</span>
</div>

but, yes, the info is all there.
I can copy and paste into and from the editor.
text color is inherited from theme:

.ace-monokai {background-color: #272822;color: #F8F8F2;}

[BobDay]

...confirmed it parses the pasted html at paste time. If I add a color: class to any of the spans, it's not read.

[BobDay]

Ah... but of course you knew all that. Short answer is yes!

[BobDay]

This post is deleted!

[BobDay]

@MattFox - Case closed. I stupidly put a non-specific div {...text-align:center}in one of my css files. Probably would have caught that, but the ace_text-layer width (& height) is set at 1000000px in ace/css/ace_editor.css, and height is further set to 1e+06px inline.

After much searching, I'm unable to find an example of why one would want to do that - although there must be one! Interestingly Chrome was rendering veeerrry slowly - when I lowered the width to 10000px, it sped up markedly.