Question

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

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

＆＃13;

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

＆＃13;

你有任何解决方案吗？

Answer 1

谷歌翻译弹出布局 - 响应式修复

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

Answer 2

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

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

这应该执行你所寻求的，但可能仍然需要很多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';

这应该在about:blank的{{1}}框架中执行，以便能够访问其中的元素。

<iframe>

如果Google更改了CSS类名称或元素ID，这可能很容易破解。记住这一点并快乐渲染。

Answer 3

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

这些选项会在垂直下拉列表中显示语言选项，也可以通过谷歌翻译和＃39;标签下面或旁边。

Answer 4

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

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

谷歌翻译小部件 - 响应

4 个答案: