为移动网站设计Google Translate小部件 [英] 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
}

但第二部分由于翻译界面作为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();

Whe。

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

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.

编辑： strong>

即使 此 也无效，因为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 Translate小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！