为移动网站设置Google翻译小部件样式 [英] Styling Google Translate widget for mobile websites

问题描述

我的网站 - www.forex-central.net - 每个页面右上方都有Google翻译下拉窗口小部件。

My website - www.forex-central.net - has the Google Translate drop-down widget on the top right of every page.

只有问题是对我的网站（5厘米）位太宽，我需要一个4厘米的版本（我看到在其他网站，所以我知道这是可能的）...但我不知道如何调整代码。

Only problem is it's a bit too wide for my website (5 cm), I would need a 4 cm version (which I've seen on other sites so I know this is possible)...but I have no idea how to tweak the code.

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

The code Google supplies for the widget I use is:

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

任何帮助将非常感谢！我有点新手，已经搜索了几个小时，这不是在任何地方： - /

Any help would be greatly appreciated! I'm a bit of a novice and have searched for hours on this, not getting anywhere :-/

推荐答案

将启动：

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

/ em>需要做的事情：

However, you would also need to do something like:

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

但是第二部分实际上无法完成，因为translate接口作为iframe包含在您的网页中。幸运的是，它没有自己的域名，因此我们可以通过Javascript访问它像这样：

But that second part can't actually be done because the translate interface is included in your page as an iframe. Fortunately, it doesn't have its own domain, so we can access it via Javascript like this:

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

在元素实际存在（以异步方式加载）之前， 将无法工作，因此我们必须在我在这里得到的东西。总之，你得到这个：

But that won't work until the element actually exists (it's being loaded asynchronously) so we have to wrap that in something that I got here. Put it all together, you get this:

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();

鼓掌。

相同的策略应用其他样式到翻译框或者可能改变表格样式，使其垂直流动，而不是水平滚动屏幕外，无论如何。 请参阅此答案。

You can use that same strategy to apply other styles to the translate box or perhaps alter the table styles to have it flow vertically instead of scroll horizontally offscreen, whatever. See this answer.

编辑：

即使 此 无效，因为Google每次都重新应用样式您点击下拉菜单。在这种情况下，我们尝试更改 height 和 box-sizing ，但Google会重新应用这些，而 overflow 和 max-width stick。我们需要的是把我们的样式放在他们不会被覆盖的地方，并添加！important s [cringes]。内联样式会做到这一点（我也用简单的变量替换了我们的选择器，并且什么是可以忽略的性能提升）：

Even this doesn't work, because Google re-applies the styles every time you click the dropdown. In this case, we try and change height and box-sizing, but Google reapplies over those, while overflow and max-width stick. What we need is to put our styles somewhere they won't get overriden and add !importants [cringes]. Inline styles will do the trick (I also replaced our selector with a variable for succinctness and what is likely a negligible performance boost):

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();

这篇关于为移动网站设置Google翻译小部件样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！