Menu
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:
After Translating to Spanish:
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>
321
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
135
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>
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
