为移动网站设置GoogleTranslate小部件样式

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

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

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

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

这样的事情会让你开始:

.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访问它,如下所示:

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

但是,这不会工作,直到元素确实存在(它被异步加载),所以我们必须包装在的东西,我来到这里.把它们放在一起,你得到这个:

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

呼.

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

编辑:

即使这样也行不通,因为每次点击下拉列表时 Google都会重新应用这些样式.在这种情况下,我们尝试改变height和box-sizing,但谷歌重新应用对这些,而overflow和max-width棍子.我们需要的是将我们的样式放在他们不会被覆盖的地方并添加!importants [cringes].内联样式将起到作用(我还用变量替换了我们的选择器以简洁,可能性能可以忽略不计):

function changeGoogleStyles() {
    if(($goog = $('.goog-te-menu-frame').contents().find('body')).length) {
        var stylesHtml = '';
        $goog.prepend(stylesHtml);
    } else {
        setTimeout(changeGoogleStyles, 50);
    }
}
changeGoogleStyles();