谷歌翻译小部件手机溢出

Question

我的网站上有谷歌翻译插件有点问题。它在桌面模式下看起来很好，但随着我向下移动到移动设备，下拉列表的宽度超出了浏览器宽度。

有没有阻止这种情况发生？

最好的问候

Answer 1

由于您无法将css添加到不存在的元素，因此您必须在点击翻译下拉列表CTA后添加它。这个jquery对我有用。

$('body').click('#google_translate_element', function () {
    if (($goog = $('.goog-te-menu-frame').contents().find('body')).length) {
        var stylesHtml = '<link rel="stylesheet" href="/css/google-translate.css">';
        $goog.prepend(stylesHtml);
    }
});

用这个css。

.goog-te-menu2 {
    width: 300px!important;
    height: 300px!important;
    overflow: auto!important;
}
.goog-te-menu2 table,
.goog-te-menu2 table tbody,
.goog-te-menu2 table tbody tr {
    width: 100%!important;
    height: 100%!important;
}
.goog-te-menu2 table tbody tr td {
    width: 100%!important;
    display: block!important;
}
.goog-te-menu2 table tbody tr td .goog-te-menu2-colpad {
    visibility: none!important;
}