css – 为移动网站设计Google Translate小部件

我的网站 – www.forex-central.net – 在每个页面的右上角都有Google Translate下拉窗口小部件.

唯一的问题是它对我的网站来说有点太宽(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>

任何帮助将不胜感激！我是一个新手,已经搜索了几个小时,没有得到任何地方： – /

解决方法

这样的事情会让你开始：

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

但是直到元素实际存在(它被异步加载)才会起作用,所以我们必须在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%','height':'auto'
            }
        )
    } else {
        setTimeout(changeGoogleStyles,50);
    }
}
changeGoogleStyles();

呼.

您可以使用相同的策略将其他样式应用于翻译框,或者可以更改表格样式以使其垂直流动,而不是在屏幕外水平滚动,无论如何. See this answer.

编辑：

即使这样也行不通,因为每次单击下拉列表时Google都会重新应用这些样式.在这种情况下,我们尝试更改高度和框大小,但谷歌重新应用这些,而溢出和最大宽度坚持.我们需要的是将我们的风格放在他们不会被覆盖的地方并添加！importants [cringes].内联样式将起到作用(我还用变量替换了我们的选择器以简洁,可能性能可以忽略不计)：

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

原文地址：https://www.jb51.cc/css/217528.html