overflowX : hidden bläht vertikal auf
mathefritz
- javascript
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 .
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
@@Matthias Scharwies
div { border:1px solid black; overflow-y: auto; }
Nein, dann funktioniert die Umschaltung des Effekts von overflow-x
nicht mehr.
LLAP 🖖
Ich weiß ja nicht was das genau werden soll ,aber wenn du das display:inline-block; weg machst dann springt da auch nix mehr