• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Problem mit autosize im IE

mikdoe

mikdoe

Moderator
Kurze Frage: Warum macht im folgenden Code im IE11 das autosize Plugin die textarea zu klein?
HTML: 
<!DOCTYPE HTML> 
<html> 
	<head> 
		<title>Test autosize</title> 
		<script src="//code.jquery.com/jquery-latest.js"></script>
		<style type="text/css">
			body {
				font-family:	"Tahoma", "Arial", "Helvetica", "Sans", "Sans-Serif";
			}
		</style>
	</head>
	<body>
	<input type="button" onclick="test();" value="Test">
	<div id="output"> </div>
	<textarea id="textadatei" style="width:99%;font-size:11px;background-color:lightgreen;"></textarea>

	<script src="/javascript/jquery-autosize.js"></script>
	<script>
		function test() {
			document.getElementById('textadatei').innerHTML = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
			jQuery('#textadatei').autosize();
			jQuery('#output').html('Hoehe '+$('#textadatei').height());
		}
	</script>
	</body>
</html>
Sobald ich oben die CSS Definition body raus nehme ist auch im IE alles ok.
Im Firefox ist es sowohl mit CSS als auch ohne korrekt.
Wieso ist das so?

Das verwendete autosize Plugin: jQuery Autosize

Im IE 11 mit CSS:
textarea_fehler_ie.jpg

Im IE 11 ohne CSS:
textarea_fehler_ie_ohne_css.jpg

Im Firefox mit und ohne CSS:
textarea_fehler_ff.jpg
 
Zuletzt bearbeitet:
Weils der IE ist? *lach*
Hast du auch mal mit der Inlineformatierung herumgespielt? Vielleicht macht der IE11 was wegen dem font-size:11px; falsch!?

PS: Hab im Moment keinen IE9/10/11 zum testen da...
 
Ja, hab ich probiert. Dann macht der IE es im selben Maßstab ebenfalls falsch. Soll heißen, Schrift und Feld sind größer aber die letzte Zeile ist trotzdem wieder abgeschnitten.
 
Okay, aber ein Blick auf die Produktseite sagt:
Incorrect size in any IE:For all browsers, the font-family for form elements are not inherited from their parent elements, unless the style is explicitly set to inherit. When JavaScript is used to get the computed style for a textarea's font-family, all versions of IE will incorrectly return the inherited font-family if a font-family style was not explicitly set. This can cause Autosize's calculations to be off. The solution is to set a font-family for textarea elements in your stylesheet:
Zum Vergrößern anklicken....
und als Lösungsansatz:
Code: 
/* set to a specific font-family */
textarea { font-family: Tahoma, sans-serif; }

/* or explicitly inherit */
textarea { font-family: inherit; }
 
Wie meinst du? Habe doch in meinem Post das Wort Produktseite mit der Website verlinkt!? Dort dann in dem Bereich Known Issues & Solutions ziemlich weit unten.
 
Man kann solche Plugins auch so schreiben, dass man diese Verrenkungen nicht braucht:
Code: 
<!DOCTYPE HTML> 
<html> 
	<head> 
		<title>Test autosize</title> 
<script type="text/javascript" src="//kkjs.kkapsner.de/modules/kkjs.load.js?modules=TextareaManager"></script>
		<style type="text/css">
			body {
				font-family:	"Tahoma", "Arial", "Helvetica", "Sans", "Sans-Serif";
			}
		</style>
	</head>
	<body>
	<button id="button">Test</button>
	<div id="output"> </div>
	<textarea id="textadatei" style="width:99%;font-size:11px;background-color:lightgreen;"></textarea>

	<script>
	(function(){
		var textarea = kkjs.$("textadatei");
		var m = new kkjs.TextareaManager(textarea);
		m.enableAutoHeight(30);
		kkjs.event.add(kkjs.$("button"), "click", function test(){
			textarea.value = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
			kkjs.event.fire(textarea, "input");
		});
	}());
	</script>
	</body>
</html>
 
Danke Korbinian.
Aber: Mir ging ohnehin schon länger auf den Keks, dass der IE die Schriftart aus body{} nicht auf <textarea>'s angewendet hat. Von daher war die Lösung eine Klappe für zwei Fliegen.
 
Korbinian, ich wollte gerade deine Variante aus #10 testen und bekomme Fehler "kkjs" ist undefiniert. Hat sich der URL geändert?
 
Korbinian, ich habe deinen Code aus #10 übernommen und immer wenn ich in die Textarea (wenn sie vertikal so groß ist, dass das Bild rechts einen Scrollbalken hat) mit Maus reinklicke zuckt das Bild vertikal. Da muss irgendwo ein ungewolltes onclick oder onfocus im Weg sein. Passiert im aktuellsten FF und IE. Kannst du das bitte mal checken? Danke dir
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben