Sudden flash of popup while loading Datatables Editor

mmlee

Error messages shown:
Earlier versions of the Datatables Editor had a warning popup in the console, but nothing shows up in version 1.9.4, making it a wee bit difficult to debug the problem.
Description of problem:
While the datatable is loading, the editor popup flashes on the screen
Previous versions of the Editor had a warning message. How could I go about solving this render issue?

Thanks a ton,
Regards

colin

That definitely shouldn't happen, as shown by our examples like this one. Are you able to link to your page, please, so we can take a look?

Colin

mmlee

Hi Colin,

DMing with the details of the webpage.

Best regards,

colin

Ah yep, I see it, thanks for the links - it looks like it's related to custom forms, as it's also doing it in our example here. We'll take a look and get back to you,

Colin

allan

The way to resolve this is probably to wrap your custom form in a display: none element. Taking our example it would be:

<div style="display: none;">
   <div id="customForm">
     ...
   </div>
</div>

The reason it is happening is that the browser is rendering the HTML before that Javascript kicks in.

Allan

mmlee

Thank you Alan, will try and get back.

mmlee

Hi Allan and Colin,

That worked like a charm, thank you! The datatable still comes to the left before finally settling down. Is it an issue with the way I'm loading the css and js files?

While loading:

Post Loading:

This is what I have in my head section:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.21/b-1.6.2/b-colvis-1.6.2/fh-3.1.7/r-2.2.5/rg-1.1.2/sc-2.0.2/sp-1.1.1/sl-1.3.1/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.21/b-1.6.2/b-colvis-1.6.2/fh-3.1.7/r-2.2.5/rg-1.1.2/sc-2.0.2/sp-1.1.1/sl-1.3.1/datatables.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>

<link href="/static-v1.0.1/scripts/vendor/Editor-1.9.4/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="/static-v1.0.1/scripts/vendor/Editor-1.9.4/js/dataTables.editor.min.js"></script>

colin

No, as Allan said, it's just because the HTML is rendered before JS kicks in. I've updated our example to use the same display too, so it's the way to go,

Glad all working,

Colin

mmlee

Got it.. thanks so much for the help!