我的网站 – www.forex-central.net – 在每个页面的右上角都有Google Translate下拉窗口小部件.
唯一的问题是它对我的网站来说有点太宽(5厘米),我需要一个4厘米的版本(我在其他网站上看过,所以我知道这是可能的)…但我不知道如何调整代码.
Google为我使用的小部件提供的代码是：
<script type="text/javascript">function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en',gaTrack: true,layout: google.translate.TranslateElement.InlineLayout.SIMPLE },'google_translate_element');}</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
任何帮助将不胜感激！我是一个新手,已经搜索了几个小时,没有得到任何地方： – /
解决方法
这样的事情会让你开始：
.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 like this访问它：
$('.goog-te-menu-frame').contents().find('.goog-te-menu2').css(
{
'max-width':'100%','overflow':'scroll','Box-sizing':'border-Box','height':'auto'
}
)
但是直到元素实际存在(它被异步加载)才会起作用,所以我们必须在something that I got here中包装它.把它们放在一起,你得到这个：
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%','height':'auto'
}
)
} else {
setTimeout(changeGoogleStyles,50);
}
}
changeGoogleStyles();
呼.
您可以使用相同的策略将其他样式应用于翻译框,或者可以更改表格样式以使其垂直流动,而不是在屏幕外水平滚动,无论如何. See this answer.
编辑：
即使这样也行不通,因为每次单击下拉列表时Google都会重新应用这些样式.在这种情况下,我们尝试更改高度和框大小,但谷歌重新应用这些,而溢出和最大宽度坚持.我们需要的是将我们的风格放在他们不会被覆盖的地方并添加！importants [cringes].内联样式将起到作用(我还用变量替换了我们的选择器以简洁,可能性能可以忽略不计)：
function changeGoogleStyles() {
if(($goog = $('.goog-te-menu-frame').contents().find('body')).length) {
var stylesHtml = '<style>'+
'.goog-te-menu2 {'+
'max-width:100% !important;'+
'overflow:scroll !important;'+
'Box-sizing:border-Box !important;'+
'height:auto !important;'+
'}'+
'</style>';
$goog.prepend(stylesHtml);
} else {
setTimeout(changeGoogleStyles,50);
}
}
changeGoogleStyles();
