django-simple-bulma
django-simple-bulma copied to clipboard
lemonsaurus
Cannot expand collapsible element
I tried adding the following snippet to a django template: https://bulma-collapsible.netlify.app/usage/#collapsible-card However the element appears collapsed, and pressing the button does not expand it.
Made sure that bulma-collapsible is enabled.
This seems like a genuine bug, and I've had two people mention this to me now. If someone wants to help with this, I'd be happy to accept a pull request.
The goal should be that this "just works". django-simple-bulma is supposed to be simple, and that means it should come with batteries included for stuff like this. That probably means putting the right JS in automatically when someone chooses to include this extension.
Adding
<script type="text/javascript" src="/static/extensions/bulma-collapsible/dist/js/bulma-collapsible.min.js"></script>
<script>
bulmaCollapsible.attach();
</script>
to my template made it work after I enabled the extension, the defer on the extension script provided by django_simple_bulma makes my inline script not work, so i had to refer to the same script without the defer to make it work. I don't know how to integrate this into the package and make it work out of the box like @lemonsaurus mentioned, but doing this gets the extension working. Any input would be appreciated
With that said I will try to write an extension script for this to make it work out of the box.
oh, interesting findings. The defer might be the culprit for this whole thing. We could probably conditionally defer scripts if it turns out that this is a bad default...
i dont know enough javascript to fix the defer issue, but we still need the single line script that adds all the collapsible element to make the extension work
There is this defer issue with all extensions.
A simple enough solution right now is to set your code to execute after the DOMContentLoaded event, because it is guaranteed that deferred scripts will have finished executing just at that moment.
In vanilla JS, the fix looks like :
<script>
window.addEventListener('DOMContentLoaded', function() {
// use the extensions here
});
</script>
