Support » Plugin: Query Monitor » Stacking issue with debug panel

  • Resolved jayx

    (@jayx)


    On my site I have a fixed position header that overlaps the debug panel.

    It should be easy to resolve by modifying the CSS for #qm as follows:

    
    #qm{
      /* Any value other than static */
      position: relative;
      /* A very high z-index to layer over any other, similarly positioned/stacked elements */
      z-index: 99999;
    }
    

    Screenshot of the issue here.

    • This topic was modified 1 year, 11 months ago by  jayx. Reason: Fixing code markdown

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author John Blackbourn

    (@johnbillion)

    WordPress Core Developer

    Thanks for the message. This is a problem with some of the default Twenty-* themes too, but QM has styles to avoid that.

    If I remember rightly, other problems can arise when positioning the output of QM relatively, but I’ll have to play around with it to see what exactly.

    Thank you for the swift response John,

    I just did a quick web inspector edit of the CSS, so yeah – not really tested well at all; but, generally speaking, position: relative is safe until to start applying directional values – it is a pre-requisite for z-index, so not much chance of it working via a different technique.

    I can always just add the rule to my own CSS as the use case might be too small for you to carry the risk of disrupting other sites’ UI with the value … OR you could include a toggle in the admin, but that would be very hackish.

    Also worth noting that I use a very bespoke theme (I typically still start with Classic as a skeleton) – the issue really just comes down to me using fixed positioning, which naturally stacks the header on top of everything else.

    Please indicate if you are considering a fix, in which case I’ll be glad to test, verify and close this ticket or whether I should just add to my theme CSS; in which case we can close this too.

    Thanks for the great plugin.

    Plugin Author John Blackbourn

    (@johnbillion)

    WordPress Core Developer

    I’ll take a look at fixing it at some point, yep.

    Plugin Author John Blackbourn

    (@johnbillion)

    WordPress Core Developer

    I fixed this in the latest version of QM. Let me know how you get on with it.

    OH YEAH!! It’s good!

    Thank you John.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Stacking issue with debug panel’ is closed to new replies.