nicht angemeldet
/ Layout - 100% sind nicht 100% ;(
Gunnar BittersmannHallo nochmal ...
ich muss nochmal mit einem anderen Problem nerven:
bevor ich es beschreibe, erstmal das grundgerüst (ja ich weiß Tabellen sind nicht zum layouten, aber ich wüsste keine andere Möglichkeit dafür):
(ich sehe gerade ich habe einen fehler im bild: die dritte rote Linie zeigt auf die textarea, soll aber auf das td zeigen, indem sich das div befindet, in dem sich die textarea befindet)
also wir haben hier erstmal eine Tabelle mit einer zeile und 2 spalten, die rechte hat eine breite von 160PX, die linke spalte bekommt den rest
in der linken spalte befindet sich nun wieder eine Tabelle, 100% höhe und 100% breite
hier haben wir nun 4 zeilen
zeile 1, 2 und 4 haben eine höhe von 25px zugewiesen bekommen ... der browser stellt sie trotzdem kleiner da, aber naja, kleineres übel ;)
zeile 3 soll nun also, da alle anderen zeilen eine höhe haben, den rest einnehmen, da die gesamte Tabelle ja mit höhe 100% definiert ist
so weit so gut - nun befindet sich in dieser zeile, bestehend aus einer zelle, ein div, auch wieder höhe 100%, breite 100%, aber: overflow-y:scroll
bedeutet für mich: ist der Inhalt der zelle größer als die zelle zur verfügung hat, wird darin gescrollt
der scrollbalken ist auch da, aber es funktioniert ausschließlich in Chrome ... in FF und IE ist das DIV einfach so groß wie das beinhaltete textarea, was ja nicht so sein soll...
leider komme ich nicht dahinter, warum das so ist - kann mir das jemand erklären?
danke ;)
LG euer SorgenKind mech
-
Vielleicht solltest du dir wirklich was anderes suchen als <table>. Du schachtelst da so unglaublich vieles ineinander. Vor allem Tabellenzeilen die nur aus einer einzigen Spalte bestehen lassen sich ganz bestimmt anders lösen. Kennst du dich noch aus in deinem Code? Also ich beim drüberschauen nicht mehr :-)
Was soll überhaupt passieren? Ein Eingabefeld soll größer sein als das Elternelement und man soll das Eingabefeld scrollen? Damit machst du eine sehr bedienerunfreundliche Seite.
Die 100% ist eine Angabe die ich selbst noch nicht ganz durchschaut habe weil ich sie nie nutze. Ich kann leider nicht verlässlich sagen worauf sich Prozentangaben beziehen, wahrscheinlich ist das die Antwort auf dein Problem. Du gehst davon aus das bedeutet "restlicher Platz", aber wenn sich das z.B. auf die Größe des Anzeigefensters bezieht siehts schon wieder anders aus. Dann ist nämlich alles was 100% hat, so groß wie das Fenster.
-
Morjen!
Vielleicht solltest du dir wirklich was anderes suchen als <table>.
würde ich gern, leider weiß ich keine andere Lösung um diesen Effekt zu erzeugen, außer css width:calc(100%-160px) was nach meinen tests scheinbach nicht so gut unterstützt wird
Du schachtelst da so unglaublich vieles ineinander. Vor allem Tabellenzeilen die nur aus einer einzigen Spalte bestehen lassen sich ganz bestimmt anders lösen. Kennst du dich noch aus in deinem Code? Also ich beim drüberschauen nicht mehr :-)
ja sicher, ich hab ihn ja geschrieben ;)
eine tabellenzeile die nur aus einer spalte besteht?
das erwckt vielleicht den eindruck, liegt aber daran, dass ich nur den relevanten teil des codes zeige - eine tabellenzeile, die nur aus einer spalte besteht würde selbst ich nicht machen *g*Was soll überhaupt passieren? Ein Eingabefeld soll größer sein als das Elternelement und man soll das Eingabefeld scrollen? Damit machst du eine sehr bedienerunfreundliche Seite.
das Eingabefeld ändert seine größe je nach Inhalt des eingabefeldes. Daher kann es sein, dass es kleiner ist, als die tabellenzelle, kann aber auch größer sein.
Hintergrund ist, dass je nach dem in der spalte unterschiedlich viele zeilen sein können, welche alle eine fest definierte höhe haben. Die Zeile jedoch, wo das Textfeld enthalten ist hat keine feste Höhe. Da nun die Tabelle mit 100% höhe definiert ist, sollte nun also die eine zeile, welche keine Höhenangabe hat, die restliche höhe einnehmen. das darin enthaltene div sollte 100% der höhe der zelle haben und bei Overflow scrollen. leider tut es das nicht, es wird einfach größer, die zelle wird damit auch größer und die Tabelle überschreitet die 100% größe, was nicht passieren soll
Die 100% ist eine Angabe die ich selbst noch nicht ganz durchschaut habe weil ich sie nie nutze. Ich kann leider nicht verlässlich sagen worauf sich Prozentangaben beziehen, wahrscheinlich ist das die Antwort auf dein Problem.
Ich vermute auch, dass das mein Problem ist. Mein bisheriges Verständnis ist, dass die 100% sich stets auf das elternelement beziehen, wobei noch zu berücksichtigen ist, in welchem textfluss das element sich befindet, bei Position:absolute wäre das ja das body-element wenn ich mich nicht irre, was aber hier nicht der fall ist.
Du gehst davon aus das bedeutet "restlicher Platz", aber wenn sich das z.B. auf die Größe des Anzeigefensters bezieht siehts schon wieder anders aus. Dann ist nämlich alles was 100% hat, so groß wie das Fenster.
ich hoffe wirklich, dass mir da jemand was klares zu sagen kann ... aber danke erstmal für deinen beitrag ;)
-
@@SorkenKind mech:
nuqneH
außer css width:calc(100%-160px) was nach meinen tests scheinbach nicht so gut unterstützt wird
Eher gar nicht. Was aufgrund des Synataxfehlers auch nicht verwundern sollte.
Und wenn du schon Tabellen zum Layouten missbrauchst, solltest du das unbedingt mit
<table role="[link:http://www.w3.org/TR/wai-aria/roles#presentation@title=presentation]">kenntlich machen.Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@SorkenKind mech:
nuqneH
huhu
außer css width:calc(100%-160px) was nach meinen tests scheinbach nicht so gut unterstützt wird
Eher gar nicht. Was aufgrund des Synataxfehlers auch nicht verwundern sollte.
ach da müssen Leerzeichen um den Operator ... ja man lernt nie aus, mir war wirklich nicht bewusst, dass das bei + und - wichtig ist ... thx!
Und wenn du schon Tabellen zum Layouten missbrauchst, solltest du das unbedingt mit
<table role="[presentation](http://www.w3.org/TR/wai-aria/roles#presentation)">kenntlich machen.ok ...
habe nun die äußere Tabelle durch 2 divs ausgetauscht, also erstes div width:calc(100% - 160px) und zweites div width:100%
beide haben height:100%
im ersten steht nun immernoch die Tabelle, welche ja 100% höhe vom 100% hohem div haben soll
leider überschreitet diese immernoch den wert ;(
hier mal ein aktuelles beispiel:
<!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Notizen</title> <style type="text/css"> html, body { margin: 0px; width: 100%; height: 100%; font-size:12px; } table, th, td, tbody, tr { padding:0px; margin:0px; } textarea { width:98%; border:1px solid black; } th { font-size:50%; background-color:#CCC; } </style> <script type="text/javascript"> var count_textarea_auto_height=0; var textarea_resize = function(event) { resize_textarea_fkt(event.target); } function resize_textarea_fkt(obj) { obj.style.overflow='scroll'; // chrome workaround obj.style.height=obj.scrollHeight + 'px'; obj.style.overflow='hidden'; // chrome workaround } function textarea_auto_height() { objs=document.getElementsByTagName('textarea'); if(objs.length!=count_textarea_auto_height) { count_textarea_auto_height=objs.length; for(i=0;i<objs.length;i++) { obj=objs[i]; if(!obj.getAttribute("tah")) { obj.addEventListener('keyup', textarea_resize, false); resize_textarea_fkt(obj); obj.setAttribute("tah",true); } } } } window.setInterval("textarea_auto_height()",1000); // das ist mist ... muss noch irgendwie anders gelöst werden ... </script> </head> <body> <form name="daten" style="height: 100%;" action="notiz.php?PHPSESSID=xyz" method="post"> <input name="vorhandene_id" type="hidden" value="44906"> <input name="vorhandener_typ" type="hidden" value="notiz"> <input name="aktion" type="hidden" value="eintragen"> <input name="undweiter" type="hidden" value=""> <div id="vorlage_neue_erinnerung" style="display: none;"> <div id="div_erinnerung[[id]]"> Erinnerung am <input name="erinnerung_datum[[id]]" id="erinnerung_datum[[id]]" onfocus="kalender_show_fkt('block','[id]')" onblur="kalender_weg_fkt('[id]')" type="text" size="7" maxlength="10"> <span id="kalender_[id]" style="width: 127px; text-align: center; font-size: 8px; display: none; position: absolute; z-index: auto; background-color: rgb(255, 255, 255);" onmouseover="kalender_nicht_weg=1"></span> um <input name="erinnerung_zeit[[id]]" id="erinnerung_zeit[[id]]" type="text" size="3" maxlength="5"> Uhr für <select name="erinnerung_user[[id]]" id="erinnerung_user[[id]]" onchange="check_erinnerung(this)"> <option value=""></option><optgroup label="1-Büro"><option value="2">chef</option><option value="5">Jansen</option><option value="32">Kwet</option><option value="38">Lutz</option></optgroup><optgroup label="2-Produktion"><option value="23">Bienemann</option><option value="15">Bünck</option><option value="29">L.Reineke</option><option value="30">Spickmann</option></optgroup><optgroup label="3-Aushilfen"><option value="16">Born</option><option value="37">Heide</option><option value="35">Hörnemann</option><option value="19">Manfeld</option><option value="39">Schwartz</option><option value="34">Tognino</option><option value="25">Zeist</option></optgroup><optgroup label="4-Sonstige"><option value="11">Leiharbeiter</option><option value="9">Praktikant</option><option value="1">root</option><option value="24">test</option></optgroup> </select> </div> </div> <div style="width: calc(100% - 160px); height: 100%; float: left;"> <table role="presentation" style="width: 100%; height: 100%; table-layout: fixed; max-height: 100%;"> <tbody> <tr> <td valign="bottom" style="height: 25px;" colspan="2"> <b>Aufgabe / Notiz speichern:</b> </td> </tr> <tr> <td align="left" style="height: 25px;" colspan="2"> <span id="erinnerungen_span"></span> <a onclick="add_erinnerung('')" href="#">Erinnerung hinzufügen</a> </td> </tr> <tr> <td valign="top" colspan="2"> <div style="width: 100%; height: 100%; overflow-y: scroll; max-height: 100%;"> <textarea name="neuenotiz" style="height: 470px; overflow: hidden;" tah="true"> </textarea><br> </div> </td> </tr> <tr> <td align="left" valign="top" style="height: 25px;" colspan="2"> <button accesskey="s" onclick="not_speichern_fkt()" type="button"><font color="green">Speichern</font></button> <button accesskey="d" onclick="speichernunddrucken()" type="button"><font color="blue">Drucken</font></button> <button accesskey="a" onclick="window.close()"><font color="red">Abbrechen</font></button> </td> </tr> </tbody> </table> </div> <div style="width: 160px; height: 100%; float: right; overflow-y: scroll;"> <table role="presentation"> <tbody> <tr> <td colspan="4">Arbeitskarte: <input name="eintragen_als_was[arbeitskarte]" id="eintragen_als_was" type="checkbox" value="arbeitskarte"></td> </tr> <tr> <td>Benutzer</td> <td><span title="Notiz">No</span></td> <td><span title="Aufgabe">Ag</span></td> <td><span title="Anrufliste">Al</span></td> </tr> <tr><th colspan="4">1-Büro</th></tr> <tr> <td onclick="uncheck_radio('eintragen_als_was[2]')">chef</td> <td><input name="eintragen_als_was[2]" id="eintragen_als_was" type="radio" value="notiz"></td> <td><input name="eintragen_als_was[2]" id="eintragen_als_was" onclick="add_erinnerung(2)" type="radio" value="aufgabe"></td> <td><input name="eintragen_als_was[2]" id="eintragen_als_was" type="radio" value="anrufliste"></td> </tr> <tr> <td onclick="uncheck_radio('eintragen_als_was[5]')">x</td> <td><input name="eintragen_als_was[5]" id="eintragen_als_was" type="radio" value="notiz"></td> <td><input name="eintragen_als_was[5]" id="eintragen_als_was" onclick="add_erinnerung(5)" type="radio" value="aufgabe"></td> <td><input name="eintragen_als_was[5]" id="eintragen_als_was" type="radio" value="anrufliste"></td> </tr> <tr><th colspan="4">2-Produktion</th></tr> <tr> <td onclick="uncheck_radio('eintragen_als_was[23]')">d</td> <td><input name="eintragen_als_was[23]" id="eintragen_als_was" type="radio" value="notiz"></td> <td><input name="eintragen_als_was[23]" id="eintragen_als_was" onclick="add_erinnerung(23)" type="radio" value="aufgabe"></td> <td><input name="eintragen_als_was[23]" id="eintragen_als_was" type="radio" value="anrufliste"></td> </tr> <tr><th colspan="4">3-Aushilfen</th></tr> <tr> <td onclick="uncheck_radio('eintragen_als_was[16]')">j</td> <td><input name="eintragen_als_was[16]" id="eintragen_als_was" type="radio" value="notiz"></td> <td><input name="eintragen_als_was[16]" id="eintragen_als_was" onclick="add_erinnerung(16)" type="radio" value="aufgabe"></td> <td><input name="eintragen_als_was[16]" id="eintragen_als_was" type="radio" value="anrufliste"></td> </tr> <tr> <td onclick="uncheck_radio('eintragen_als_was[25]')">o</td> <td><input name="eintragen_als_was[25]" id="eintragen_als_was" type="radio" value="notiz"></td> <td><input name="eintragen_als_was[25]" id="eintragen_als_was" onclick="add_erinnerung(25)" type="radio" value="aufgabe"></td> <td><input name="eintragen_als_was[25]" id="eintragen_als_was" type="radio" value="anrufliste"></td> </tr> <tr><th colspan="4">4-Sonstige</th></tr> <tr> <td onclick="uncheck_radio('eintragen_als_was[24]')">test</td> <td><input name="eintragen_als_was[24]" id="eintragen_als_was" type="radio" value="notiz"></td> <td><input name="eintragen_als_was[24]" id="eintragen_als_was" onclick="add_erinnerung(24)" type="radio" value="aufgabe"></td> <td><input name="eintragen_als_was[24]" id="eintragen_als_was" type="radio" value="anrufliste"></td> </tr> </tbody> </table> </div> </form> </body></html>Qapla'
ich verzweifel an dem blöden teil ;(
LG euer SorgenKind mech
-
hm also es steht ja geschrieben:
"Defines the height in percent of the containing block"wenn nun <td> kein "block" ist, dann würde er ja quasi von einem falschen bezug ausgehen ...
ich vermute einfach mal, dass es daran liegt und dass ich nicht einfach sagen kann, dass td nun ein block sein soll ... dahingehend bin ich aktuell ratlos ...
LG
-
also ich habe dem div mit der textarea nun ein max-height verpasst, welches, sofern zeilen in der Tabelle hinzukommen, jeweils verringert wird ... nicht schön, da das layout damit nicht mehr so flexibel ist, aber naja ...
wenn noch jemand eine Idee haben sollte her damit, ansonsten werd ich mit dem Workaround erstmal leben
LG
-
-
-
-
-