no scrollbars in options popup ported from Chrome in firefox webextension

前端未结

关注

 1  934

无人及你

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 hal

相关标签:

1条回答

逝去的感伤

2020-12-12 08:53
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).

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.

The simplest way to get the scroll bars to show up, is to change your HTML from:
```
<body>
```
to:
```
<body style="height:580px;width:800px;">
```
Obviously, you could also change this in your CSS (banks/options.css). From:
```
body{
    min-width:500px;
    min-height: 500px;
}
```
To:
```
body{
    height: 580px;
    width: 800px;
    min-width: 500px;
    min-height: 500px;
}
```
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).

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);
```
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:
0 讨论(0)
发布评论:

提交评论
- 加载中...