search

maximebf / php-debugbar

Debug bar for PHP
phpdebugbar.com
MIT License
4.2k stars 402 forks source link

Body margin-bottom VS body height 100% #414

Open zd-dalibor opened 5 years ago

zd-dalibor commented 5 years ago

What to do if I have css like this:

html, body {
  height: 100%;
}

When debugbar adds margin-bottom to body, body goes out of view port for the same value as margin-bottom and I got vertical scroll bar.

john-inkesta commented 11 months ago

This is still an issue. I'm using Laravel Debugbar, which is using php-debugbar, inside a FilamentPHP project. Tags: Filament, TALL, Laravel

nicolasbinet commented 7 months ago

it would be nice to use padding-bottom instead of margin-bottom.

BenceSzalai commented 4 months ago

A more versatile solution would be to put classes to <body> to indicate the presence (and probably state, like minimised or closed) of the debug-bar as well to assigne a css variable e.g.: --php-debugbar-height: 30px; that would be updated in real-time to match the actual height. This way anyone with special layouts could easily put in place the rules they need in their CSS, e.g. for the case in this issue:

body.has-phpdebugbar:not(.phpdebugbar-closed) {
   margin-bottom: 0 !important;
   padding-bottom: var(--php-debugbar-height);
}

Indeed with these classes and the CSS variables anyone could adjust the presentation to whatever complex-custom page structure they have in place.

Let me know if PR with this would be accepted?

EDIT: Meanwhile I'm using this workaround to make the debug bar height available globally in a CSS var, so I can adjust my fixed and sticky positioned elements.

const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    onBodyStyleChange();
  }
});
const config = { attributes: true, attributeFilter: ['style'] };
observer.observe(document.body, config);

function onBodyStyleChange() {
  observer.disconnect();
  document.body.style.setProperty('--php-debugbar-height', document.body.style.paddingBottom ? document.body.style.paddingBottom : 0);
  observer.observe(document.body, config);
}
onBodyStyleChange();