7

Google Translate seems to be changing my html, moving my asterisk to a new line.

Here is a live example: jsbin

How can I avoid this?

Before Translating:

enter image description here

After Translating to Spanish:

enter image description here

JS:

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
    autoDisplay: false
  }, 'google_translate_element');
}

Css:

.box_content-form-data {
  clear: both;
  float: left;
}

Html:

<div id="google_translate_element"></div>
<span style="clear:both; float:left;">Enter your email account.</span>
<span class="box_content-form-data">
          <label>Email Address:
              <span style="color:red;">*</span>
</label>
</span>
11
  • @Huangism It should work in theory though right? I would like to support many languages and don't have the resources to get translations to that many languages. Feb 8, 2018 at 16:24
  • It's not that accurate, I would suggest you do the 2 main languages of your site only. If people really wanted it in a different language they could just use chrome and it would offer translation by itself
    – Huangism
    Feb 8, 2018 at 16:29
  • @Huangism I unfortunately don't have a choice. We need to support as many languages as possible and as a team are choosing to use Google Translate. We are fine with the inaccuracy, but are not fine with Google Translate disrupting our html. Do you have any ideas on why it is changing the structure of our site? Feb 8, 2018 at 16:35
  • There is no why, I guess that's just how it works. I suggest you look at the API page and see if there is anything in there you can use. For example, where did you get layout: google.translate.TranslateElement.InlineLayout.SIMPLE from? That site should have all the info you need
    – Huangism
    Feb 8, 2018 at 16:40
  • I went through this gui: translate.google.com/manager/website After answering a few questions, it spit out a code snippet that should have translated my website. Feb 8, 2018 at 16:41

4 Answers 4

10
+100

do not use a span to wrap around the elements. A label is not allowed to be used within a span. That's invalid HTML and therefore prone to cause errors.

Literally changing your <span class="box_content-form-data"> to a <div> fixed the issue as far as I can see. See here

-- as per your last comment, what counts for spans also counts for labels. They aren't meant for nesting a lot of elements.

http://jsbin.com/botimiwipi/1/edit?html,output

5
  • @JackFairfield because you are putting everything in a label. A label is not meant as a container for anything other than in-line elements. If you change box_content-form-data from label to div as I have done in my example, it'll work.
    – NoobishPro
    Feb 9, 2018 at 21:09
  • 2
    @JackFairfield added another working example to my answer.
    – NoobishPro
    Feb 9, 2018 at 21:13
  • Thank you so much. I see that now. You are a god! Feb 9, 2018 at 21:18
  • 2
    @JackFairfield uhmmm thanks ahaha. More like a sad excuse for a programmer than a god, but I'll take it ;).
    – NoobishPro
    Feb 9, 2018 at 21:27
  • 2
    I tried to give you the bounty and it says I have to wait a full 24 hrs. Feb 9, 2018 at 21:51
2

Instead of using spans, just use labels. It seems the <span> tags are being treated oddly by google translate.

I'm assuming you tie this into a form which makes more sense to use <label> anyways.

Here is the fiddle: http://jsbin.com/rapusexufu/edit?html,css,output

<label style="clear:both; float:left;">Enter your email account.</label>
<label class="box_content-form-data">Email Address:
    <span style="color:red;">*</span>
</label>
3
  • 1
    Unfortunately this worked in this very simple example, but when I tried with a larger form it is doing the same thing. Feb 9, 2018 at 19:08
  • @JackFairfield here is an example with an actual form element and four input elements and it still works. jsbin.com/cayukoxije/edit?html,css,output Note that I removed your clear and float styles and replaced them with input{ display: block}
    – Badrush
    Feb 9, 2018 at 19:29
  • See my updated JsBin. I looks like changing to a label element only works in the isolated example. Feb 9, 2018 at 21:03
2

Though I wasn't able to find a way to preclude Google from changing the HTML, here is how I handled it and it seems to work just fine.

All I did was remove the * from the HTML completely, and put it into a pseudoelement, and hide one of the elements created by Google translate.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  <title>JS Bin</title>
</head>
<body>
  <div id="google_translate_element"></div>
  <span style="clear:both; float:left;">Enter your email account.</span>
  <span class="box_content-form-data">
      <label class="my-email">Email Address:</label>
  </span>
</body>
</html>

And for the CSS:

.box_content-form-data {
    clear: both;
    float: left;
}

.my-email:after {
  content: "*";
  color: red;
}

font + .box_content-form-data {
  display: none;
}
1
  • I actually answered this earlier... But I retracted my answer as I had found a way better, simpler and more correct way to fix it.
    – NoobishPro
    Feb 9, 2018 at 20:36
-1

Here it is. Working example: http://jsbin.com/gelefonevu/edit?html,css,output

.box_content-form-data {
    clear: both;
    float: left;
}
.box_content-form-data:nth-of-type(2) {
    clear: initial;
}
5
  • No.... It still doesn't work. There are no styles you can add to the label or the inner span that will change the output because Google Translate is changing the html around. I was really asking for a way to prevent Google Translate from changing my html in a way that changes the way the elements are organized. Feb 9, 2018 at 18:49
  • I want to simply use the "Translate Website" option. I don't want to have to translate each html element individually. I used this gui: translate.google.com/manager/website/ Originally to generate the dropdown to add to the site. Feb 9, 2018 at 18:57
  • using nth-of-type(2) is a type of selector that is generally quite unreliable. It gets easily broken by changing the HTML, meaning you'd have to work according to a very specific structure which is easily ruined by google translate. If it works in this case that is great, though I would recommend against using ever that type of function unless it's to be used on element wrappers that are in a container specifically to be repeated as single elementwrappers.
    – NoobishPro
    Feb 9, 2018 at 19:45
  • @Babydead I'm not seeing your working example. Could you post a jsbin? Feb 9, 2018 at 20:04
  • @RonRoyston look at my answer, there is a jsbin there.
    – NoobishPro
    Feb 9, 2018 at 20:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.