Вы не сможете настроить расположение этого виджета строго с помощью CSS. Элементы <a>, содержащие ссылки для всех языков на выбор, выложены в ячейках <td> в строках. Поэтому они не будут динамически раскладываться с изменением размера.
Вы можете, однако, обойти это, получив все языковые ссылки в содержащемся и добавив их к <div> за пределами <table>.
Это должно выполнять то, что вы ищете, хотя по-прежнему может потребоваться много настроек CSS. Большая часть элементов пользовательского интерфейса Google выставляется вручную с размерами пикселей и переопределенными атрибутами, такими как overflow:hidden, чтобы избежать поведения браузера по умолчанию (иногда непоследовательного). Для решения этого вопроса может потребоваться справедливый бит [толкание вокруг DOM] [1], чтобы определить, где эти корректировки выполняются.
Это должно быть выполнено в самом верхнем фрейме, чтобы получить доступ к элементу и внести изменения в его CSS. Обратите внимание, что селектор не является уникальным идентификатором, поэтому он может возвращать другой , чем ожидалось, в зависимости от содержимого вашей страницы.
var iframe = document.querySelector('.goog-te-menu-frame.skiptranslate');
if (iframe === null) {
console.error('Could not find iframe of language links');
} else {
// Force <iframe> visibility and auto-resizing
iframe.style.display = '';
iframe.style.height = '';
iframe.style.width = '99%!important';
Это должно быть выполнено в about:blank раме , чтобы иметь доступ к элементам внутри.
// Get all the <a> elements
var anchors = document.querySelectorAll('a.goog-te-menu2-item');
anchors = Array.prototype.slice.call(language_anchors);
if (anchors.length < 1) {
console.error('Found no language links');
}
// Get the conatiner <div> that holds the table of links
var div = document.getElementById(':1.menuBody');
if (div === null) {
console.error('Could not find div containing table of language links');
} else {
// Remove width/height attributes to have <div> resize
div.style.height = '';
div.style.width = '';
// Iterate through all language links
anchors.forEach(function (a) {
// Set display to inline=block so its rendered like text
// This is what gets the elements onto a new line if they don't fit
a.style.display = 'inline-block';
// Append them directly to the <div>
div.appendChild(a);
});
// Remove the now empty <table> to keep things clean
div.removeChild(div.querySelector('table'));
}
Это может легко сломаться, если Google изменит их имена классов CSS или идентификаторы элементов. Имейте это в виду и счастливой рендеринга.
Пожалуйста, предоставьте нам ссылку на ваш сайт.Трудно отлаживать без кода – Paradoxetion
Я обновил свой вопрос @Rainfall – MatusSeidl
Предоставленный ответ демонстрирует изменение размера рамки, указанной в вашем вопросе. Я считаю, что это адекватно решает ваш вопрос, пожалуйста, выберите ответ, который сработал для вас, чтобы этот вопрос можно было считать разрешенным. – Nicholas