mathefritz: overflowX : hidden bläht vertikal auf

Guten Morgen!

Die Demo hier ( wird nicht ewig hier bleiben )resultiert aus folgendem Quellcode

<!DOCTYPE html><html lang="de">        <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
                                      </head>
  <body>
<div  id='t'
   style="display:inline-block; max-width:1.0em;
           border:1px solid black;"

>abc</div>

<script>
t = document.getElementById('t');

function oflTggl(){ t.style.overflowX = 
                    t.style.overflowX ? "" : "hidden";
}
</script>
<br>
<button type="button" onclick="oflTggl();">toggle overflow</button>
  </body>
</html>

im Original ist eigentlich keine Leerzeile vor dem ">abc</div>" . Rätselhaft und unerwünscht ist, daß der Button bei Klicks vertikal hin und her wandert .

  1. Servus!

    <script>
    t = document.getElementById('t');
    
    function oflTggl(){ t.style.overflowX = 
                        t.style.overflowX ? "" : "hidden";
    }
    </script>
    

    Rätselhaft und unerwünscht ist, daß der Button bei Klicks vertikal hin und her wandert .

    Grad bei StackOverflow gegooglet:

    https://stackoverflow.com/questions/18135204/setting-overflow-y-causes-overflow-x-to-change-as-well

    "If you are using visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto."

    Sobald du overflowX auf einen Wert setzt, wird der Wert von overFlowY von visible auf auto gesetzt.

    2 Möglichkeiten:

    Setze

    div {
    	border:1px solid black;
    	overflow-y: auto;
    }
    

    oder nimm das display: inline-block raus und mach es zu block.

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun: ToDo-Liste
    1. @@Matthias Scharwies

      div {
      	border:1px solid black;
      	overflow-y: auto;
      }
      

      Nein, dann funktioniert die Umschaltung des Effekts von overflow-x nicht mehr.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. Ich weiß ja nicht was das genau werden soll ,aber wenn du das display:inline-block; weg machst dann springt da auch nix mehr