Proposed best practice for hiding custom template on page load

Loren Maxwell

I'll post this on this page as well: https://editor.datatables.net/reference/option/template

@Stacey1134 has a solution in the comments about how to avoid that brief flash of custom templates for Editors on page load.

An example of that flash can be found here:
https://editor.datatables.net/examples/simple/template-attribute.html
or https://editor.datatables.net/examples/simple/template.html

My previous solution was similar to his (hiding the template in the html and then using the API to show it), but since then I've started to just put all my templates in a special section of the page that is hidden:

<!-- All custom templates go inside this div -->
<div hidden>
   <div id="customForm">
      yada yada yada
   </div>
</div>

Now all my custom templates are hidden when the page loads and I can get rid of all initEditor code.

I would propose this as the best practice

Loren Maxwell

I'm actually getting the following error trying to post this as a comment on the template page...

"Sorry - an error has occurred. Please try again in a few minutes"

The console shows a 403 Forbidden error.

allan

Darn, that will be CloudFlare blocking the comment for some reason. I'll look at relaxing that rule - thank you.

Thanks also for the suggestion of the hidden div. I think it makes sense to actually have that in the example, possibly with a CSS name in the Editor CSS that can be used for it.

Allan

allan

Just a quick follow up to say that I've committed a change to wrap the demo templates in a display: none element. I did try having a class available for it, but it requires the CSS to be loaded before the HTML displays, which isn't always guaranteed. The display: none wrapper is the most full proof.

Allan

Loren Maxwell

Thanks @allan!

The little flash on page load is minor but something that's always annoyed me, so I’m glad I finally realized such a simple solution was possible.

Only took me about 9 years to come up with it