Google 翻译小部件 - 响应式答案

【问题标题】：Google Translate widget - responsiveGoogle 翻译小部件 - 响应式
【发布时间】：2016-03-26 15:33:16
【问题描述】：

在我的网页上，当我调整浏览器大小时，我放置了翻译小部件，widged 不会改变大小

我尝试更改 css，但我只能更改 iframe 的 css

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

你有什么解决办法吗？

【问题讨论】：

请向我们提供您网站的链接。没有代码很难调试
我更新了我的问题@Rainfall
提供的答案确实演示了调整问题中指向的框架的大小。我觉得这充分解决了您的问题，请选择一个适合您的答案，以便该问题被视为已解决。

标签： web responsive-design frontend google-translate web-frontend

【解决方案1】：

<!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"

【讨论】：

【解决方案2】：

谷歌翻译弹出布局 - 响应式固定

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

【讨论】：

【解决方案3】：

不是调整大小问题的解决方案，但可能会有所帮助。您可以在谷歌翻译选择器的 init 函数中更改默认布局。将行
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
更改为layout: google.translate.TranslateElement.InlineLayout.VERTICAL
或layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL。

这些选项将在垂直下拉列表中显示语言选择，并在其下方或旁边显示“由 Google 翻译实现”标签。

【讨论】：

这个选项对我们来说也是最好的解决方案。要设置类似于 OP 的选项的样式，可以使用 css 设置样式，例如：.goog-te-gadget .goog-te-combo {margin: 0;边框：无；边框半径：50px；填充：5px 0px 5px 35px；背景：#fff url(images/google-logo.gif) no-repeat 10px center; -moz 外观：无；外观：无； -webkit 外观：无； } `

【解决方案4】：

您将无法使用严格的 CSS 调整此小部件的布局。包含可供选择的所有语言的链接的<a> 元素按行排列在<td> 单元格中。因此，它们不会随着调整大小而动态布局。

但是，您可以通过获取包含的<iframe> 中的所有语言链接并将它们附加到<table> 之外的<div> 来解决此问题。

这应该会执行您所寻求的，但可能仍需要大量的 CSS 调整。 Google 的大部分 UI 元素都是使用像素尺寸和覆盖属性（如 overflow:hidden）手动布局的，以避免默认（有时不一致）浏览器行为。这个解决方案可能需要相当多的[查看 DOM][1] 来确定这些调整是在哪里进行的。

这应该在最顶层的框架中执行以访问<iframe> 元素并更改其CSS。请注意，选择器不是唯一 ID，因此它可能返回与预期不同的 <iframe>，具体取决于您的页面内容。

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';

这应该在<iframe> 的about:blank 框架中执行以访问其中的元素。

// 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'));
}

如果 Google 更改其 CSS 类名称或元素 ID，这可能会很容易中断。记住这一点，祝您渲染愉快。

【讨论】：

【解决方案5】：

您可以将其放入您正在使用的主题的 css 文件中。调整它以使其适合您。希望对您有所帮助！

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

【讨论】：