Static Content Disappeared after adding my RAW code HTML/CSS/JS

[MartinAEM]

Hello there,

I'm brand new on the AEM world and I'm already encourtning a problem... I work in a web agency whose main client works with AEM. I have a page that I have to modify with some simple raw code that i've developed myself. To do so, I created a Static Content, like I always do, where I paste my code HTML, CSS and JS. 

The code works well when on preview, but the Static Content totally disappeared on edit mode! I remember already having this problem, to fix this I had to refresh the page and the Static Content Bar appeared again. But this time, no way!

I refreshed the page so many times, I tried to cancel the page and recreated it again from the last save, I also cancel the page and created it again days later... The code inside still works but the Static Content still totaly invisible! so if the client ask me to change things, I will be stuck :'(

I know that the Static Content is still present on the page because on the Preview Mode, my code works well, I also remember the position of this content when I put it on the page. So when I try to catch/grab/select it, it's impossible, because it's between 2 other components and even if I try the move the others from their initial positions, I can't see it. It's like my Static Content Component is less than 1px of height...

I also tried to put 2 blank content from AEM to try to separate my Static Content from others but it's does nothing.

It's like some magic to me...

Thank you for your kind assistance

Sincerely

[VeenaVikraman]

@MartinAEM I have a slight understanding of what kind of issue you might be facing, but I cannot answer this completely unless , you can provide me with some code which I can reproduce in my local and exactly point you to where and what you are doing wrong. 

One thing you have to understand while working with AEM components in edit mode is that there will be some additional divs that might be getting generated to support the authoring of the component. It totally depends on how you have created and where you have placed these components. I doubt the issue might be somewhere there.

Thanks

Veena

[MartinAEM]

Hello Veena, thank you for your answer, but I actually found a way to get rid of this problem. I had to open the "inspector" of my browser, find the div with the class static-content something, and modify the css which was "overflow: auto" to "oerflow-scroll" and after this, I was able to see the Static Content Component of my page, select it and delete it

Maybe my answer will help somebedy else, not an easy way, but this the only solution I found to fix it quickly

Have a great day!

[VeenaVikraman]

good to hear your issue is resolved.

[Shashi_Mulugu · Accepted solution]

In most cases, you may face challenges in configuring the static code in editor mode as it AEM adds extra clientlibraries (For editor interface to work) and extra divs around components. Please make sure your static code doesnt conflict with extra divs added as well not conflict with editor css/js files.