Inputfeld/Formular soll ganze Tabellenzelle ausfüllen,FF streikt

[MeierKurt]

Hallo,

zum Bearbeiten einer Datenbank möchte ich ein excel-ähnliches Layout erreichen. Dazu möchte ich, dass die einzeiligen Eingabebereiche (Jede Tabellenzelle enthält 1 Formular mit 1 einzeiligen Eingabebereich) genauso gross sind wie die jeweilige Tabellenzelle selber (Gründe: wegen Hintergrund und später onMouseOver etc.).

Leider bekomme ich es im FF nicht hin. Im IE funktionierts. Der Firefox lässt bei einigen scheinbar zufälligen, nicht allen Tabellenzellen über dem Formular noch einen schmalen Streifen (meist 1 px) frei, obwohl alle Tabellenzellen und Inputs/Forms die gleiche css-definition haben.

Neben dem Eingabebereich sind in jedem Formular in der Tabellenzelle noch 2 hidden-inputs definiert,  bei denen ich davon ausgehe, dass sie keinen Platz brauchen. (Richtig?)

Ich habe auch schon versucht, die Formularhöhen den Tabellen-Zeilenhöhen nachträglich per Javascript anzupassen, aber die Anweisung
<element>.style.height = <tabellenzeile>.OffsetHeight;
klappt nicht richtig bei mir, die Zeilenhöhen werden dann alle zu gross.

Ich will nicht den ganzen Code posten um das Forum nicht zuzumüllen.
Folgende CSS-Definition verwende ich:

.tabelle
{
 position: absolute;
 left:   0px;
 top:    0px;
 table-layout:fixed;
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 border-spacing:0px ;
 background-color:white;
 border-collapse: collapse;
 border-width:0px 0px 0px 0px;
}

.tabellenzellen
{

min-width: 390px;
  width: 390px;
  border: 1px solid gray;
  vertical-align:middle;
  padding: 0px 0px 0px 0px;
  border-spacing: 0px;
  background-color: white;

font-family:arial, sans-serif;
  font-size: 12px;
  color:black;
}

.formular
{
   border: 1px solid red;  /* Nur als Test um die Begrenzung zu sehen */
   width:  100%;
   min-height: 100%;
   height: 100%;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   border-spacing: 0px;
}

.inputfeld{
           min-width: 100%;
           width: 100%;
           height:100%;
           margin: 0px 0px 0px 0px;
           padding: 0px 0px 0px 0px;
           border-spacing: 0px;
           border-width:0px;
           background-color:blue;  /* Als Test, normal white */
          }

Weiss jemand was ich falsch amche?

Besten Dank und Grüsse,
MeierKurt

[ChrisB]

Hi,

Ich will nicht den ganzen Code posten um das Forum nicht zuzumüllen.

Recht hast du - an einem Online-Beispiel können wir die geschilderte Problematik vermutlich sehr viel besser nachvollziehen.

MfG ChrisB

[MeierKurt]

Recht hast du - an einem Online-Beispiel können wir die geschilderte Problematik vermutlich sehr viel besser nachvollziehen.

Das ist wohl wahr, es fehlt mir aber momentan leider der Webspace, deshalb habe ich diese Möglichkeit grad nicht. Dumm, ich weiss. Kann man denn vielleicht schon aus den CSS-Definitionen einen Fehler erkennen? Oder gibt es bekannte Bugs diesbezüglich im FF oder interpretiert er nur anders? Ich habe die strict-Variante der DTD angegeben.

Kann ich eigentlich einem height-Attribut nachträglich per Javascript einen Wert in Pixel zuweisen, wenn es in der CSS-Definition in % angegeben wurde?

[Malcolm Beck´s]

hi,

Dazu möchte ich, dass die einzeiligen Eingabebereiche ... genauso gross sind wie die jeweilige Tabellenzelle selber

Deine Tabelle ist durch das Absolute positionieren aus dem Textfluss und hat keine feste Höhe; das Formular soll 100% hoch sein, nur, 100% von was?

Neben dem Eingabebereich sind in jedem Formular in der Tabellenzelle noch 2 hidden-inputs definiert,  bei denen ich davon ausgehe, dass sie keinen Platz brauchen. (Richtig?)

Um White-space Probleme auszuschliessen, könntest du diese in einer Zeile unterbringen.
<input text/><input hidden/><input hidden/>

<element>.style.height = <tabellenzeile>.OffsetHeight;
klappt nicht richtig bei mir, die Zeilenhöhen werden dann alle zu gross.

Weil die umschliessende Tabelle keine Höhe hat, an der sich deine gesetzten Werte orientieren können.

» .tabelle  

> {  
>  position: absolute;  
>  left:   0px;  /* 0 ist 0; ob 0px oder 0% macht da keinen Unterschied */  
>  top:    0px;  
>  margin: 0px 0px 0px 0px;  /* hier genügt ein einfaches „0“, um den gleichen Effekt zu erzielen */  
>  padding: 0px 0px 0px 0px;  
> }  
> .formular  
> {  
>    min-height: 100%;  
>    height: 100%;             /* 100% von was? */  
> }  
> .inputfeld{  
>            min-width: 100%;  
>            width: 100%;  
>            height:100%;             /* auch hier, 100% von was? */  
>           }

Versuch doch erstmal, dem Formular eine Feste höhe zu geben, und teste, ob sich das input-Element wie gewünscht verhält, wenn ja, kannst du zur Tabelle übergehen.

mfg

[MeierKurt]

Deine Tabelle ist durch das Absolute positionieren aus dem Textfluss und hat keine feste Höhe; das Formular soll 100% hoch sein, nur, 100% von was?

Ich dachte, er baut erst die Tabelle komplett auf und setzt dann nachträglich die Höhe des Input-Feldes auf 100% der Zeilenhöhe, sofern das Inputfeld selbst als Maximum nicht schon die Höhe vorgeben würde...so irgendwie dachte ich mir das.

[Malcolm Beck´s]

hi,

Ich dachte, er baut erst die Tabelle komplett auf und setzt dann nachträglich die Höhe des Input-Feldes auf 100% der Zeilenhöhe,

Ja, aber wie hoch ist diese Zeilenhöhe?
Ich habe es nicht getestet, aber, „100% von X“, ich glaube nicht, dass die Browser das wie gewünscht darstellen werden.

Du kannst es ja Testen und das Ergebnis hier für die zukünftigen Archiv-suchenden verewigen.

mfg