69 lines
2.1 KiB
Plaintext
Executable File
69 lines
2.1 KiB
Plaintext
Executable File
Si le problème persiste, copie/colle dans la console (F12 → Console) ce script — il va appliquer temporairement une margin test à #site-container, puis lister et surligner les descendants qui se retrouvent en dehors du conteneur (donc responsables du débordement) et afficher leurs propriétés utiles :
|
|
|
|
|
|
|
|
|
|
|
|
(function() {
|
|
const container = document.querySelector('#site-container');
|
|
if (!container) { console.log('❌ #site-container introuvable'); return; }
|
|
|
|
const origML = container.style.marginLeft;
|
|
const origMR = container.style.marginRight;
|
|
const testMargin = '20px';
|
|
|
|
console.clear();
|
|
console.log('🔍 Test débordement avec margin ' + testMargin);
|
|
|
|
// appliquer margin test
|
|
container.style.marginLeft = testMargin;
|
|
container.style.marginRight = testMargin;
|
|
|
|
const cRect = container.getBoundingClientRect();
|
|
const vw = document.documentElement.clientWidth;
|
|
const offenders = [];
|
|
|
|
[...container.querySelectorAll('*')].forEach(el => {
|
|
const r = el.getBoundingClientRect();
|
|
// si l'élément dépasse à gauche ou à droite du conteneur
|
|
if (r.left < cRect.left - 0.5 || r.right > cRect.right + 0.5) {
|
|
offenders.push({
|
|
el: el,
|
|
tag: el.tagName.toLowerCase(),
|
|
cls: el.className,
|
|
id: el.id,
|
|
left: Math.round(r.left),
|
|
right: Math.round(r.right),
|
|
width: Math.round(r.width),
|
|
computed: window.getComputedStyle(el)
|
|
});
|
|
// surligner
|
|
el.style.outline = '3px solid orange';
|
|
}
|
|
});
|
|
|
|
// restaurer margin
|
|
container.style.marginLeft = origML;
|
|
container.style.marginRight = origMR;
|
|
|
|
if (!offenders.length) {
|
|
console.log('✅ Aucun descendant ne dépasse le conteneur avec cette marge test.');
|
|
} else {
|
|
console.log('⚠️ Eléments dépassant le conteneur :', offenders);
|
|
offenders.forEach(o => {
|
|
console.log(
|
|
'o:', o.el,
|
|
'\ntag:', o.tag,
|
|
'\nid:', o.id,
|
|
'\nclass:', o.cls,
|
|
'\nleft:', o.left, 'right:', o.right, 'width:', o.width,
|
|
'\ncomputed.width:', o.computed.width,
|
|
'\ncomputed.minWidth:', o.computed.minWidth,
|
|
'\ncomputed.whiteSpace:', o.computed.whiteSpace,
|
|
'\ncomputed.display:', o.computed.display
|
|
);
|
|
});
|
|
}
|
|
})();
|
|
|