django-formset icon indicating copy to clipboard operation
django-formset copied to clipboard

Problem when using selectize together with a google translate snippet

Open spapas opened this issue 1 year ago • 2 comments

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

spapas avatar Jan 06 '24 22:01 spapas

Interesting problem.

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

jrief avatar Jan 06 '24 23:01 jrief

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...

spapas avatar Jan 07 '24 08:01 spapas