21

The top menu bar, when set to sticky, hides content when one run a snippet in full screen.

Is there some new setting to control this that I might have missed?, or someone else missed something :)

Tested on Chrome, Firefox and Edge, all behaves the same.

enter image description here

20
  • I'm fairly sure this has been pointed out before....
    – Jon Clements Mod
    Commented May 26, 2017 at 8:14
  • 1
    @JonClements Maybe, but as I just noticed it (and couldn't find any already posted), I posted....better one to many than none, right? And simple to delete
    – Asons
    Commented May 26, 2017 at 8:22
  • 1
    Yeah... Can't seem to find it either (hopefully I'm not just imagining it). No worries.
    – Jon Clements Mod
    Commented May 26, 2017 at 8:26
  • @JonClements Nobody seen this yet? And btw, if I'm not mistaken, it worked properly the day before I posted this.
    – Asons
    Commented May 28, 2017 at 17:47
  • 1
    I spotted this a few days ago when it hid an example Bootstrap navbar docked to the top of the screen. Worked around it with body { margin-top: 4em; }
    – Conan
    Commented May 28, 2017 at 23:28
  • 3
    Doesn't affect non sticky top-bar. So workaround : Disable stickiness in your prefs > Navigation
    – Kaiido
    Commented May 29, 2017 at 1:25
  • @Conan Do you use Tampermonkey, or similar, to override those setting?
    – Asons
    Commented May 29, 2017 at 7:14
  • @LGSon no, I just added the CSS to the snippet as this was a one-off (thus far).
    – Conan
    Commented May 29, 2017 at 12:04
  • @Conan Aha..okay, got that.
    – Asons
    Commented May 29, 2017 at 14:36
  • 2
    nav's z-index (1050) is greater than stack-snippets's z-index (1030). Commented May 30, 2017 at 10:19
  • Can confirm on Chrome 58 as well, was just about to report this.
    – Jason C
    Commented Jun 4, 2017 at 16:50
  • 1
    I only noticed it just now, so apparently we're not using full-screen often enough. And it's in all main browsers even, not just some niche ones.
    – Mr Lister
    Commented Jun 9, 2017 at 8:48
  • Here is another example. (Deleted question - only admins can see it - probably.) stackoverflow.com/questions/44464378/…
    – Chloe
    Commented Jun 9, 2017 at 18:23
  • @JonClements Now somebody did something here. The full screen snippet is now on top of the top bar, which is great, but what is not so great is that the Close button/link is now missing. If one is in edit mode preparing an answer and goes to full screen to test how it looks, one will lose everything, as their is no way to get back to the edit window. Should I post another question or what?
    – Asons
    Commented Jun 13, 2017 at 19:01
  • 1
    @PraveenKumar Go and eat... :)
    – Asons
    Commented Jun 19, 2017 at 15:25

1 Answer 1

4

I'm sad that this still happens (at least, for sticky top bars), but in the mean time, here's a stylesheet override that fixes the issue while also not messing with the site in other ways:

iframe.snippet-box-edit[style*="fixed"] {
    top: 60px !important;
    height: calc(100% - 60px) !important;
}

You can install it with Stylish (Chrome, Firefox, home page) or something. AFAIK calc is widely supported. 60px seems to be the hard coded top bar height from all.css, so it should always line up. Replace it with whatever if you're using a custom top bar stylesheet with a narrower bar.

Just in case it's not clear, this is a style that needs to be applied to the site, not used in your snippet. It will fix it for all snippets.

1
  • I'm sad more that this still happens in 2021! I hope that there are people working on SO sites....or not?
    – vee
    Commented Feb 8, 2022 at 17:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .