Google Translate widget - responsive

Question

On my Web page I put translate widget when i resize browsers widged does not change size

I tried change css but i can change only css for Iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="script.js"></script>

    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                pageLanguage: 'en',
                layout: google.translate.TranslateElement.InlineLayout.SIMPLE
            }, 'google_translate_element');
        }
    </script>

    <script type="text/javascript"
            src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

</head>
    <body>

        <div id="google_translate_element"></div>

    </body>
</html>

do you heve any solution?

Please provide us the link to your website. It's hard to debug without code — Paradoxetion, Dec 20 '15 at 14:23
The answer provided does demonstrate to resize the frame pointed to in your question. I you feel this adequately addresses your question, please select an answer that worked for you so that this question may be considered resolved. — Nicholas, Jun 17 '16 at 18:53

score 9 · Answer 1 · answered Aug 31 '17 at 10:12

Google Translate popup Layout - responsive fixed

<div id="google_translate_element" style="text-align: center;"></div>
 <style>
        .goog-te-banner-frame.skiptranslate {
            display: none !important;
        } 
        body {
            top: 0px !important; 
        }

        .goog-te-menu-frame {
        max-width:100% !important; 
        }
        .goog-te-menu2 { 
        max-width: 100% !important;
        overflow-x: scroll !important;
        box-sizing:border-box !important; 
        height:auto !important; 
        }
    </style>

    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                pageLanguage: 'en',
                autoDisplay: false,
                layout: google.translate.TranslateElement.InlineLayout.SIMPLE
            }, 'google_translate_element');
            function changeGoogleStyles() {
                if($('.goog-te-menu-frame').contents().find('.goog-te-menu2').length) {
                    $('.goog-te-menu-frame').contents().find('.goog-te-menu2').css({
                        'max-width':'100%',
                        'overflow-x':'auto',
                        'box-sizing':'border-box',
                        'height':'auto'
                    });
                } else {
                    setTimeout(changeGoogleStyles, 50);
                }
            }
            changeGoogleStyles();
        }
    </script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

score 4 · Answer 2 · answered Feb 22 '17 at 19:04

4

Not the solution to resizing issue but maybe helpful. You can change the default layout in the init function of the google translate selector. Change in the line
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
to layout: google.translate.TranslateElement.InlineLayout.VERTICAL
or layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL.

These options will show the language choices in a vertical dropdown with also either the 'Made possible by Google Translate' label under or next to it.

answered Feb 22 '17 at 19:04

Marty Staas

401
4
8

1

This option has been the best solution for us as well. To style the select box similar to the OP's option, it can be style with css such as: `.goog-te-gadget .goog-te-combo {` margin: 0; border: none; border-radius: 50px; padding: 5px 0px 5px 35px; background: #fff url(images/google-logo.gif) no-repeat 10px center; -moz-appearance: none; appearance: none; -webkit-appearance: none; } ` – Chumtarou Jan 10 '18 at 22:49

Nicholas · Answer 3 · 2016-04-01T15:50:05.677

You will not be able to adjust the layout of this widget using strictly CSS. The <a> elements containing links for all of the languages to choose from are laid out in <td> cells in rows. Therefore, they will not be laid out dynamically with resizing.

You can however, get around this by getting all the language links in the contained <iframe> and appending them to a <div> outside the <table>.

This should perform what you seek though may still require much CSS tweaking. Much of Google's UI elements are laid out manually with pixel dimensions and overridden attributes like overflow:hidden to avoid default (sometimes inconsistent) browser behavior. This solution may require a fair bit of [poking around the DOM][1] to determine where these adjustments are being done.

This should be executed in the top-most frame to access the <iframe> element and make changes to its CSS. Note that the selector is not a unique ID so it may return a different <iframe> than expected depending on the contents of your page.

var iframe = document.querySelector('.goog-te-menu-frame.skiptranslate');

if (iframe === null) {

  console.error('Could not find iframe of language links');

} else {

// Force <iframe> visibility and auto-resizing
iframe.style.display = '';
iframe.style.height = '';
iframe.style.width = '99%!important';

This should be executed in the about:blank frame of the <iframe> to have access to the elements within.

// Get all the <a> elements
var anchors = document.querySelectorAll('a.goog-te-menu2-item');
anchors = Array.prototype.slice.call(language_anchors);
if (anchors.length < 1) {
  console.error('Found no language links');
}

// Get the conatiner <div> that holds the table of links
var div = document.getElementById(':1.menuBody');

if (div === null) {

  console.error('Could not find div containing table of language links');

} else {

  // Remove width/height attributes to have <div> resize
  div.style.height = '';
  div.style.width = '';

  // Iterate through all language links
  anchors.forEach(function (a) {
      // Set display to inline=block so its rendered like text
      // This is what gets the elements onto a new line if they don't fit
      a.style.display = 'inline-block';

      // Append them directly to the <div>
      div.appendChild(a);
  });

  // Remove the now empty <table> to keep things clean
  div.removeChild(div.querySelector('table'));
}

This may break easily if Google changes their CSS class names or element IDs. Keep that in mind and happy rendering.

score 0 · Answer 4 · answered Sep 24 '21 at 11:45

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="script.js"></script>

    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                pageLanguage: 'en',
                layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
            }, 'google_translate_element');
        }
    </script>

    <script type="text/javascript"
            src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

</head>
    <body>

        <div id="google_translate_element"></div>

    </body>
</html>





YOU NEED TO CHANGE THE "SIMPLE" TO "HORIZONTAL"

score -3 · Answer 5 · answered Jan 06 '16 at 17:01

-3

You can put this in your css file for the theme that you're using. Tweak it to make it work for you. Hope that helps!

select.goog-te-combo{width:100%!important;}

answered Jan 06 '16 at 17:01

Doug Moore

1
1

Google Translate widget - responsive

5 Answers5