css - 为移动网站设计谷歌翻译小部件

Question

我的网站 - www.forex-central.net - 在每个页面的右上角都有谷歌翻译下拉小部件。

唯一的问题是它对于我的网站来说有点太宽了(5 厘米)，我需要一个 4 厘米的版本(我在其他网站上看到过，所以我知道这是可能的)...但我不知道如何调整代码。

Google 为我使用的小部件提供的代码是:

<script type="text/javascript">function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en', gaTrack: true, 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> 

任何帮助将不胜感激!我是个新手，已经搜索了几个小时，但一无所获:-/

Answer 1

像这样的事情会让你开始:

.goog-te-menu-frame {
    max-width:100% !important; //or whatever width you want
}

但是，您还需要执行以下操作:

.goog-te-menu2 { //the element that contains the table of options
    max-width: 100% !important;
    overflow: scroll !important;
    box-sizing:border-box !important; //fixes a padding issue
    height:auto !important; //gets rid of vertical scroll caused by box-sizing
}

但是第二部分实际上无法完成，因为翻译界面作为 iframe 包含在您的页面中。幸运的是，它没有自己的域，所以我们可以通过 Javascript 访问它 like this :

$('.goog-te-menu-frame').contents().find('.goog-te-menu2').css(
    {
        'max-width':'100%',
        'overflow':'scroll',
        'box-sizing':'border-box',
        'height':'auto'
    }
)

但是 that 在元素实际存在之前不会起作用(它被异步加载)所以我们必须将它包装在 something that I got here 中.把它们放在一起，你会得到这个:

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':'scroll',
                'box-sizing':'border-box',
                'height':'auto'
            }
        )
    } else {
        setTimeout(changeGoogleStyles, 50);
    }
}
changeGoogleStyles();

哇哦。

您可以使用相同的策略将其他样式应用于翻译框，或者更改表格样式以使其垂直移动而不是水平滚动到屏幕外，等等。 See this answer.

编辑:

即使这 也不起作用，因为 Google 会在您每次点击下拉菜单时重新应用样式。在这种情况下，我们尝试更改 height 和 box-sizing，但 Google 重新应用了这些，而 overflow 和 max-width 坚持。我们需要的是将样式放在不会被覆盖的地方，并添加 !important [畏缩]。内联样式可以解决问题(我还用一个变量替换了我们的选择器，以保持简洁并且性能提升可能可以忽略不计):

function changeGoogleStyles() {
    if(($goog = $('.goog-te-menu-frame').contents().find('body')).length) {
        var stylesHtml = '<style>'+
            '.goog-te-menu2 {'+
                'max-width:100% !important;'+
                'overflow:scroll !important;'+
                'box-sizing:border-box !important;'+
                'height:auto !important;'+
            '}'+
        '</style>';
        $goog.prepend(stylesHtml);
    } else {
        setTimeout(changeGoogleStyles, 50);
    }
}
changeGoogleStyles();