Search code examples
htmlcssgoogle-translatetranslate

How can I prevent Google Translate from changing the html structure of my page?

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

  • 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