在Firefox WebExtension中从Chrome移植的选项弹出窗口中没有滚动条 [英] no scrollbars in options popup ported from Chrome in firefox webextension
问题描述
我正在将chrome扩展程序移植到Firefox，并且正在Nightly 51a ..版本上进行测试.
I'm porting chrome extension to Firefox and I'm testing on Nightly 51a.. version.
当我单击弹出选项图标时，它会打开并显示滚动条，半秒钟后这些滚动条就会消失.
When I click the popup options icons it opens and scrollbars appear and after half a second those disappear.
该如何纠正?
此刻，我已经在optins弹出窗口的顶部提供了带有此代码的超链接，当单击该代码时，它将在新选项卡中打开完整视图html，并且效果很好:
At the moment I've given a hyperlink in the top in the optins popup with this code which when clicked opens full view html in a new tab and this works just fine:
<a style="font-size:1.5em;" href="options.html" target="_blank">Open Full Window</a>
推荐答案
The popup that is being shown for a browser_action is, currently, being set to a maximum of 800x600 pixels (at least in my testing). However, your content is being rendered at a much larger size while having the scroll bars not shown to the user (either not rendered at all, or positioned outside of the view into the document provided by the panel).
有多种解决方法.但是，我找不到一个没有为<body>或子元素(例如包含所有内容的<div>)指定显式height和width的结果.有几种显示滚动条的方法，但是使它们处于禁用状态.
There are multiple ways to solve this. However, I was not able to find one that did not result in specifying an explicit height and width for the <body>, or a sub element (e.g. a <div> enclosing all content). Several ways showed the scroll bars, but left them disabled.
最简单的显示滚动条的方法是将HTML更改为:
The simplest way to get the scroll bars to show up, is to change your HTML from:
<body>
收件人:
<body style="height:580px;width:800px;">
很显然，您也可以在CSS( banks/options.css )中对此进行更改.发件人:
Obviously, you could also change this in your CSS (banks/options.css). From:
body{
min-width:500px;
min-height: 500px;
}
收件人:
body{
height: 580px;
width: 800px;
min-width: 500px;
min-height: 500px;
}
但是，这两种方法都不能允许面板以不同的尺寸显示(例如，在其他尺寸的屏幕上，或者Firefox更改了正在执行的操作).
However, neither of those allow for the possibility that the panel will be shown with different dimensions (e.g. on other sized screens, or if Firefox changes what it is doing).
因此，我更喜欢的解决方案是使用JavaScript.在 options.js 中添加以下内容:
Thus, my prefered solution is to use JavaScript. In options.js add something like:
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)，上面的代码看起来像这样:
Using a significantly trimmed down version of the code for your extension (i.e. I removed all your JavaScript, and most of the non-visible HTML), the above code makes it look like:
这篇关于在Firefox WebExtension中从Chrome移植的选项弹出窗口中没有滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
