谷歌翻译小部件移动溢出[重复]

【问题标题】：Google translate widget mobile overflow [duplicate]谷歌翻译小部件移动溢出[重复]
【发布时间】：2016-11-06 01:18:01
【问题描述】：

我的网站上的谷歌翻译插件有点问题。它在桌面模式下看起来很好，但是当我向下移动到移动时，下拉菜单的宽度超过了浏览器的宽度。

有没有办法防止这种情况发生？

最好的问候

【问题讨论】：

应用下拉菜单，它的父部分是宽度：100%
@iyyappan 不起作用，因为小部件是在加载 css 文件后生成的。必须用 jQuery 的 css onClick 注入它
是的，当然。将 !important 与注入的 CSS 一起使用。否则使用 Width:100% 的 setTimeout 函数

标签： jquery css google-translate

【解决方案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;
}

【讨论】：