谷歌翻译小部件移动溢出 [英] Google translate widget mobile overflow

问题描述

我的网站上的Google翻译插件有点问题.在桌面模式下看起来不错，但是当我向下移动时，下拉列表的宽度超过了浏览器的宽度.

I'm having a bit of a problem with google's translate plugin on my site. It appears fine in desktop mode but as I move down to mobile the width of the dropdown exceeds the browser width.

总有办法防止这种情况发生吗?

Is there anyway to prevent this from happening?

最诚挚的问候

推荐答案

由于您无法将CSS添加到不存在的元素中，因此您必须在单击翻译下拉CTA后将其添加.这个jQuery对我有用.

As you can't add css to elements that don't exist you have to add it after you click on the translate dropdown CTA. This jquery works for me.

$('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;
}

这篇关于谷歌翻译小部件移动溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！