overflow in dynamisch erzeugten Elementen und IE
flashnfantasy
- javascript
0 wahsaga0 Maxx0 flashnfantasy0 Maxx
0 Joachim
Das Problem:
Ich erzeuge eine DIV mit einem Script, hänge sie an die vorgesehene Stelle, gebe ihr eine feste Breite und als CSS-Eigenschaft overflow = "auto".
Wenn nun ein großes Bild oder ein langer Text vorkommt, dann reagieren Opera und Firefox wie erwartet und erzeugen Scrollbars.
Nur der IE scheint die CSS-Eigenschaft overflow komplett zu ignorieren bzw. arbeitet so, als wäre sie auf "visible" gesetzt.
Was ich inzwischen rausgefunden habe - der IE Explorer reagiert nur so, wenn das Element erzeugt wurde aber noch nicht auf dem Bildschirm angezeigt wird. Wird hingegen die CSS-Eigenschaft eines bestehendes bzw. angezeigtes Element verändert, dann arbeitet auch der IE korrekt.
Also kurz:
IE ignoriert die overflow-Eigenschaft einer per Script erzeugten DIV.
Problem bekannt ?
Lösung vorhanden ?
hi,
Ich erzeuge eine DIV mit einem Script, hänge sie an die vorgesehene Stelle, gebe ihr eine feste Breite und als CSS-Eigenschaft overflow = "auto".
Verwendeter Code?
der IE Explorer reagiert nur so, wenn das Element erzeugt wurde aber noch nicht auf dem Bildschirm angezeigt wird. Wird hingegen die CSS-Eigenschaft eines bestehendes bzw. angezeigtes Element verändert, dann arbeitet auch der IE korrekt.
[...]
Lösung vorhanden ?
Element erst sichtbar machen, und dann overflow setzen?
gruß,
wahsaga
Hallo flashnfantasy <-- Anrede, Begrüßung. Normalerweise der
Beginn der Kommunikation
Was ich inzwischen rausgefunden habe - der IE Explorer reagiert nur so, wenn das Element erzeugt wurde aber noch nicht auf dem Bildschirm angezeigt wird. Wird hingegen die CSS-Eigenschaft eines bestehendes bzw. angezeigtes Element verändert, dann arbeitet auch der IE korrekt.
nein, das kann ich nicht nachvollziehen. Ein kleiner Test zeigte keinen Unterschied zwischen dem im HTML vorhanden <div><img> und zur Laufzeit über document.createElement() erzeugten <div><img>
Problem bekannt ?
Lösung vorhanden ?
nein, btw. du plenkst.
Zeig doch mal dein javascript / CSS. Sicher ist dort der Fehler zu suchen.
Grüße, <-- Verabschiedung
Jochen
Hi Jochen,
der Code grob aufgezeigt:
tdcContent.style.overflow = "auto";
tdcContent.style.width = "110px";
tdcContent.style.maxWidth = "110px";
wobei tdcContent mit createElement erzeugt wurde.
Wie gesagt, Firefox und Opera schlucken den Code ohne Probleme.
Und IE führt den oben genannten Code auch aus, wenn das Element schon auf dem Bildschirm existiert - und das scheint der Knackpunkt zu sein.
Bin gerade am experiementieren mit einer verzögerten Zuweisung der Breite mit einer Funktion über setTimeout...
Gruß,
Mathias
Hi Mathias,
tdcContent.style.overflow = "auto";
tdcContent.style.width = "110px";
tdcContent.style.maxWidth = "110px";wobei tdcContent mit createElement erzeugt wurde.
tja, hmmm ... prinzipiell sehe ich erst mal keinen Fehler. Habe es allerdings auch etwas anders gelöst:
Etwas CSS:
#test3 {
width:400px;
overflow:auto;
}
Etwas Javascript:
elem1=document.createElement("div");
elem1.setAttribute("id","test3");
elem2=document.createElement("img");
elem2.setAttribute("src","pic.gif");
elem2.setAttribute("width","600");
elem2.setAttribute("height","120");
elem1.appendChild(elem2);
document.getElementsByTagName("body")[0].appendChild(elem1);
Vielleicht kannst du diesen Ansatz auf deine Bedürfnisse umbauen?
Viele Grüße,
Jochen
Hi Jochen,
ja, mit setzen des Klassennamen funktioniert es auch.
Wobei ich mit
elem.className = "xxx"
die Elemente formatiere.
Aber tatsächlich lag der Fehler ganz woanders - und zwar bei einem Float, das eigentlich von meiner Logik her keinen Einfluß auf die Breite hätte haben dürfen.
Habe also meine ganze Tüftlerkraft in eine einheitliche Behandlung der Floats reingesteckt...
Danke für die Hilfe,
Mathias
Hi,
Ich erzeuge eine DIV mit einem Script, hänge sie an die vorgesehene Stelle, gebe ihr eine feste Breite und als CSS-Eigenschaft overflow = "auto".
wie? mit setAttribute? Dann waere dort das Problem zu finden.
Ansonsten versuche doch mal diese Eigenschaften in einer Klasse zusammenzufassen, und dann dem Div lediglich die Klasse zuzuweisen (eldiv.className = "...")
Gruesse, Joachim