WBCE Home | WBCE Hilfe | WBCE Addon Repository | Impressum | Datenschutz

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.

Offline

Liked by:

hamburgerhans, stefanek, bernd, boeseroeser, webbird, colinax

Board footer

Powered by FluxBB

up