Firefox Screenshots 'Full Screen' not working on Airtable form
Love the great new feature of Firefox Screenshots - useful to take shots of full pages rather than screen captures.
It doesn't work on airtable forms which is on place it would be really useful for me eg. https://airtable.com/shrcLBYFthQs5WrSQ
It just takes a shot of the visible area of the page even when selecting Full Screen.
I've tried on mac and windows - I've tried turning it off and on again in about:config, I couldn't see any <frameset> tags which are reported not to work.
Any clues?
Chosen solution
I hate pages like this where they use tricky layout. What they've done is use style rules to fix the page height to the visible viewport height (height:100%) and suppress the rest of the page (overflow:hidden). You can inject a little style rule hack to override this once you know the problem. I realize this isn't a convenient or universal solution, but maybe it will help from time to time.
While you have the page open:
(1) Open the Style Editor in the Developer Tools. Either:
- Shift+F7
- "3-bar" menu > Web Developer > Style Editor
- (menu bar) Tools > Web Developer > Style Editor
(2) At the upper left corner above the list of files, click the + button to create a new sheet
(3) In the blank editing area on the right, paste this rule that overrides overflow:hidden
html, body, div {
overflow: visible !important;
}
Firefox should apply it within a few moments.
You can close the Developer Tools now, either by clicking the little X button at the right end of the Developer Tools toolbar, or by pressing Command+Alt+i or F12.
(4) Create your screenshot and in the preview, you should have the entire page
Note: this kind of "hack" is only in effect until you reload the page, so if something goes terribly wrong, and it wouldn't cause you to lose data, you can always reload.
Read this answer in context 👍 1All Replies (3)
Chosen Solution
I hate pages like this where they use tricky layout. What they've done is use style rules to fix the page height to the visible viewport height (height:100%) and suppress the rest of the page (overflow:hidden). You can inject a little style rule hack to override this once you know the problem. I realize this isn't a convenient or universal solution, but maybe it will help from time to time.
While you have the page open:
(1) Open the Style Editor in the Developer Tools. Either:
- Shift+F7
- "3-bar" menu > Web Developer > Style Editor
- (menu bar) Tools > Web Developer > Style Editor
(2) At the upper left corner above the list of files, click the + button to create a new sheet
(3) In the blank editing area on the right, paste this rule that overrides overflow:hidden
html, body, div {
overflow: visible !important;
}
Firefox should apply it within a few moments.
You can close the Developer Tools now, either by clicking the little X button at the right end of the Developer Tools toolbar, or by pressing Command+Alt+i or F12.
(4) Create your screenshot and in the preview, you should have the entire page
Note: this kind of "hack" is only in effect until you reload the page, so if something goes terribly wrong, and it wouldn't cause you to lose data, you can always reload.
Note that you can also use a JavaScript bookmarklet to toggle this style rule.
javascript:/*style::toggle*/(function(){var L='s-overflow',S='html,body,div{overflow:visible!important;}',SS,E=document.querySelector('style[id="'+L+'"]');if(E){E.parentNode.removeChild(E)}else{SS=document.createElement('style');SS.setAttribute('type','text/css');SS.id=L;SS.textContent=S;document.querySelector('head').appendChild(SS)}})()Thanks heaps for the fast response @jscher2000! Very handy trick. I wonder if the fullscreen screenshot function could overide 'overflow:hidden' somehow? Because seeing the overflow what doesn't fit on the screen is its best purpose. But this does the job for now thanks heaps!