нет полос прокрутки во всплывающих опциях, перенесенных из Chrome в Firefox Webextension

firefox-webextensions

533 просмотра

1 ответ

Я портирую расширение Chrome на Firefox и тестирую на версии Nightly 51a ..

Когда я нажимаю значки всплывающих опций, они открываются и появляются полосы прокрутки, а через полсекунды они исчезают.

Как это исправить?

На данный момент я дал гиперссылку во всплывающем окне optins с этим кодом, который при нажатии открывает полный просмотр HTML на новой вкладке, и это прекрасно работает:

<a style="font-size:1.5em;" href="options.html" target="_blank">Open Full Window</a>

введите описание изображения здесь

Автор: user5858 Источник Размещён: 08.11.2019 11:18

Ответы (1)


0 плюса

Всплывающее окно, отображаемое для a browser_action, в настоящее время имеет максимальный размер 800x600 пикселей (по крайней мере, в моем тестировании). Однако ваш контент визуализируется в гораздо большем размере, а полосы прокрутки не показываются пользователю (либо вообще не отображаются, либо располагаются за пределами представления в документе, предоставленном панелью).

Есть несколько способов решить эту проблему. Тем не менее, я не смог найти тот, который не привел к указанию явного heightи widthдля <body>, или подэлемента (например, <div>охватывающий весь контент). Несколько способов показывали полосы прокрутки, но оставляли их отключенными.

Самый простой способ отобразить полосы прокрутки - изменить HTML-код с:

<body>

чтобы:

<body style="height:580px;width:800px;">

Очевидно, вы также можете изменить это в своем CSS ( banks / options.css ). Из:

body{
    min-width:500px;
    min-height: 500px;
}

Для того, чтобы:

body{
    height: 580px;
    width: 800px;
    min-width: 500px;
    min-height: 500px;
}

Однако ни один из них не учитывает возможность того, что панель будет показана с другими размерами (например, на экранах других размеров или если Firefox изменит то, что он делает).

Таким образом, мое предпочтительное решение - использовать JavaScript. В options.js добавьте что-то вроде:

function setBodyHeightWidth(){
    let width=window.innerWidth;
    let height=window.innerHeight;
    height -= 20; //Adjust for Save button and horizontal scroll bar
    //document.body.style.width=width; //Does not work
    //document.body.style.height=height; //Does not work
    document.body.setAttribute('style','height:' + height + 'px;width:' + width + 'px;');
}

function onDOMLoaded(){
    setBodyHeightWidth();
    //Anything else you need to do here.
}

document.addEventListener('DOMContentLoaded', onDOMLoaded);

Используя существенно урезанную версию кода для вашего расширения (т.е. я удалил весь ваш JavaScript и большую часть невидимого HTML), приведенный выше код делает его похожим на:

Панель прокрутки

Автор: Makyen Размещён: 21.08.2016 01:59
Вопросы из категории :
32x32