WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 03.09.2019 18:00:40

florian
Administrator

Unerwünschten horizontalen Scrollbalken beheben

Bei komplexen Designs passiert es gerne mal, dass irgendwo ein Padding oder Margin dazu führt, dass die Seite breiter als der Viewport wird. In den ganzen ineinander verschachtelten Blocklevelelementen den Schuldigen zu finden, kann dann sehr mühsam sein.

Von dieser Seite ist das nachfolgende Javascript-Schnipsel:

<script>
var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);
</script>

Am Ende des Templates einfügen und Seite im Frontend aufrufen.
In der Browser-Konsole (F12) werden dann die Elemente ausgegeben, die den Overflow verursachen.
Nachdem das Problem im CSS behoben ist, löscht man dann das Script einfach wieder aus dem Template.

Nachtrag: Das funktioniert nicht immer, evtl. hilft dann das hier beschriebene Vorgehen
https://stackoverflow.com/a/44243400

Last edited by florian (27.09.2019 15:29:47)

Offline

Liked by:

hamburgerhans, stefanek, bernd, boeseroeser, webbird, colinax

Board footer

Powered by FluxBB

up