jrief / django-formset

The missing widgets and form manipulation library for Django
https://django-formset.fly.dev/
MIT License
317 stars 30 forks source link

Problem when using selectize together with a google translate snippet #101

Open spapas opened 8 months ago

spapas commented 8 months ago

Hello, I'm using the following snippet on my site to enable google translate:

      <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
      <script type="text/javascript">
        function googleTranslateElementInit() {
          new google.translate.TranslateElement({
            pageLanguage: 'el',
            includedLanguages: 'en',
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE
          }, 'google_translate_element');
        }
      </script>

Now, when I try to use the selectize widget I get the following warning and a similar error:

chunk-65OJRBX6.js:1 Could not read stylesheet, try adding crossorigin="anonymous" CSSStyleSheet {ownerRule: null, type: 'text/css', href: 'https://www.gstatic.com/_/translate_http/_/ss/k=tr…=AN8SPfq5gedF4FIOWZgYyMCNZA5tU966ig/m=el_main_css', ownerNode: link, parentStyleSheet: null, …}cssRules: (...)disabled: falsehref: "https://www.gstatic.com/_/translate_http/_/ss/k=translate_http.tr.qhDXWpKopYk.L.W.O/am=wA/d=0/rs=AN8SPfq5gedF4FIOWZgYyMCNZA5tU966ig/m=el_main_css"media: MediaList {length: 0, mediaText: ''}ownerNode: linkownerRule: nullparentStyleSheet: nullrules: (...)title: nulltype: "text/css"[[Prototype]]: CSSStyleSheet DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at Object.i [as convertPseudoClasses] (http://127.0.0.1:8000/static_ehcg/formset/js/chunk-65OJRBX6.js:1:358)
    at http://127.0.0.1:8000/static_ehcg/formset/js/django-formset.js:25:33876
chunk-65OJRBX6.js:1 Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at Object.d [as stylesAreInstalled] (http://127.0.0.1:8000/static_ehcg/formset/js/chunk-65OJRBX6.js:1:761)
    at new ke (http://127.0.0.1:8000/static_ehcg/formset/js/chunk-NH2NEJWE.js:1:50837)
    at tt.connectedCallback (http://127.0.0.1:8000/static_ehcg/formset/js/chunk-NH2NEJWE.js:1:56521)
    at n (http://127.0.0.1:8000/static_ehcg/formset/js/django-formset.js:25:34004)
    at http://127.0.0.1:8000/static_ehcg/formset/js/django-formset.js:25:34237

This results to broken styles of the selectize element.

Please notice that if I remove the google translate snippet everything seems to be working fine.

Thank you

jrief commented 8 months ago

Interesting problem.

Just for curiosity, what are you using the Google-Translate script for?

spapas commented 8 months ago

This script adds a button to your site that will translate it using google translate (similar to this https://www.w3schools.com/howto/howto_google_translate.asp). It is useful if you've got an app that doesn't support i18n but needs to be used by other people. It isn't perfect but it's better than nothing...