jquery - 谷歌翻译小部件移动溢出

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