[HTML] Firefox textarea display

[Verwijderd]

Ik heb een soort grid van textarea elementen die netjes getoond wordt in IExplorer 6 en Opera 9, maar erg lelijk in Firefox. De hoogte van de textarea's is te groot, en ze worden over de breedte van het scherm verdeeld - het effekt is als volgt (de 'rows' setting is 1):

IE6 / Opera:

aaa bb cc ddddddddddddddddddddddd
aaa bb cc ddddddddddddddddddddddd
aaa bb cc ddddddddddddddddddddddd

Firefox:

aaa bb cc ddddddddddddddddddddddddd

aaa bb cc ddddddddddddddddddddddddd

aaa bb cc ddddddddddddddddddddddddd

Is daar iets aan te doen?

Willem
etc.

[Upsal]

Heb je misschien een voorbeeld van je situatie zoals die nu is?
De textarea een vaste grootte geven gaat vrij gemakkelijk met CSS. Voorbeeld:

HTML:

<textarea style="width: 300px; height: 24px; font-family: Arial; font-size: 12px;"></textarea>

[Verwijderd]

Upsal schreef op vrijdag 10 november 2006 @ 18:27:
Heb je misschien een voorbeeld van je situatie zoals die nu is?
De textarea een vaste grootte geven gaat vrij gemakkelijk met CSS. Voorbeeld:

HTML:

<textarea style="width: 300px; height: 24px; font-family: Arial; font-size: 12px;"></textarea>

Het punt is dat ik daarna de textarea dynamisch wil kunnen vergroten c.q. verkleinen - dus een vaste hoogte instellen is geen oplossing in dit geval.

[moozzuzz]

kan je de grootte evt. niet instellen met em-maten? Die zijn letterlijk op fonts gebaseerd. Heb je een online vb'tje? Dan kunnen we je prob beter inschatten.

[JHS]

Verwijderd schreef op vrijdag 10 november 2006 @ 22:03:
[...] Het punt is dat ik daarna de textarea dynamisch wil kunnen vergroten c.q. verkleinen - dus een vaste hoogte instellen is geen oplossing in dit geval.

Javascript kan de style / grootte ook aanpassen als je eerst een vaste hoogte hebt opgegeven ? Daarrnaast is het erg lastig je te helpen zonder de - relevante - code, of eventueel een testcase.

[Verwijderd]

JHS schreef op zaterdag 11 november 2006 @ 10:59:
[...]
Javascript kan de style / grootte ook aanpassen als je eerst een vaste hoogte hebt opgegeven ? Daarrnaast is het erg lastig je te helpen zonder de - relevante - code, of eventueel een testcase.

Hieronder een extract dat als voorbeeld kan dienen, gevolgd door de code die ik gebruik om de textarea's te vergroten zodat de gehele tekst er in past.

<p>
<tr>
<td>
<textarea id='133' style='overflow:hidden' rows='1' cols='4'>508</textarea>
</td>
<td>
<textarea id='134' style='overflow:hidden' rows='1' cols='3'>##</textarea>
</td>
<td>
<textarea id='135' style='overflow:hidden' rows='1' cols='3') onkeyup=keyUp('135')>$a</textarea>
</td>
<td>
<textarea id='136' style='overflow:hidden' rows='1' cols='80'>Produced by John Foreman ; screenplay by John Huston and Gladys Hill ; directed by John Huston ; original music score by Maurice Jarre.</textarea>
</td>
</tr>
</p>
<p>
<tr>
<td><textarea id='137' style='overflow:hidden' rows='1' cols='4'>511</textarea>
</td>
<td>
<textarea id='138' style='overflow:hidden' rows='1' cols='3'>1#</textarea>
</td>
<td>
<textarea id='139' style='overflow:hidden' rows='1' cols='3'>$a</textarea>
</td>
<td>
<textarea id='140' style='overflow:hidden' rows='1' cols='80'>Sean Connery, Michael Caine, Christopher Plummer.</textarea>
</td>
</tr>
</p>
<p>
<tr>
<td>
<textarea id='141' style='overflow:hidden' rows='1' cols='4')>520</textarea>
</td>
<td>
<textarea id='142' style='overflow:hidden' rows='1' cols='3'>##</textarea>
</td>
<td>
<textarea id='143' style='overflow:hidden' rows='1' cols='3'>$a</textarea>
</td>
<td>
<textarea id='144' style='overflow:hidden' rows='1' cols='80'>Danny Dravot and Peachy Carnehan leave 19th century India and set out for the isolated, primitive land of Kafiristan, whose people haven't seen an outsider in hundreds of years. Peachy becomes lord of the kingdom's treasury, a huge chamber spilling over with limitless gold and priceless rare jewels. Danny is first crowned king, then, declared a god.</textarea>
</td>
</tr>
</p>

Code voor resize in Internet Explorer:

while (cell.clientHeight>cell.scrollHeight) cell.rows-=1;
while (cell.clientHeight<cell.scrollHeight) cell.rows+=1;

Code voor resize in Firefox:

text=cell.value.split('\n');
newRows=1;
for (i=0;i<text.length;i++) {
newRows+=Math.floor(text[i].length/(cell.cols-5));
}
if (newRows!=cell.rows) cell.rows=newRows;

[moozzuzz]

HTML:

<p>
<tr>
<td>

Klinkt niet zo goed.

Ik heb nog niet echt door wat je precies wilt doen (maar ligt wellicht aan mij, te laat gaan slapen en te vroeg uit bed gerold vandaag)

[Verwijderd]

moozzuzz schreef op zaterdag 11 november 2006 @ 18:41:

HTML:

<p>
<tr>
<td>

Klinkt niet zo goed.

Ik heb nog niet echt door wat je precies wilt doen (maar ligt wellicht aan mij, te laat gaan slapen en te vroeg uit bed gerold vandaag)

De <p></p> horen er natuurlijk niet, die zijn er bij het maken van het voorbeeld stiekem ingeslopen - hieronder volgt een gekuiste versie - het maakt voor het verhaal niet echt uit.
Wat ik wil is dat het Firefox textarea kleiner is (vergelijkbaar met IE6) - zoals je kunt zien wordt er nu door Firefox een 2 regels hoog textarea getoond.
Als ik een vaste hoogte instel, kan ik daarna (althans met mijn huidige code) de hoogte niet meer dynamisch aanpassen.

<table>
<tr>
<td>
<textarea id='133' style='overflow:hidden' rows='1' cols='4'>508</textarea>
</td>
<td>
<textarea id='134' style='overflow:hidden' rows='1' cols='3'>##</textarea>
</td>
<td>
<textarea id='135' style='overflow:hidden' rows='1' cols='3') onkeyup=keyUp('135')>$a</textarea>
</td>
<td>
<textarea id='136' style='overflow:hidden' rows='1' cols='80'>Produced by John Foreman ; screenplay by John Huston and Gladys Hill ; directed by John Huston ; original music score by Maurice Jarre.</textarea>
</td>
</tr>
<tr>
<td><textarea id='137' style='overflow:hidden' rows='1' cols='4'>511</textarea>
</td>
<td>
<textarea id='138' style='overflow:hidden' rows='1' cols='3'>1#</textarea>
</td>
<td>
<textarea id='139' style='overflow:hidden' rows='1' cols='3'>$a</textarea>
</td>
<td>
<textarea id='140' style='overflow:hidden' rows='1' cols='80'>Sean Connery, Michael Caine, Christopher Plummer.</textarea>
</td>
</tr>
<tr>
<td>
<textarea id='141' style='overflow:hidden' rows='1' cols='4')>520</textarea>
</td>
<td>
<textarea id='142' style='overflow:hidden' rows='1' cols='3'>##</textarea>
</td>
<td>
<textarea id='143' style='overflow:hidden' rows='1' cols='3'>$a</textarea>
</td>
<td>
<textarea id='144' style='overflow:hidden' rows='1' cols='80'>Danny Dravot and Peachy Carnehan leave 19th century India and set out for the isolated, primitive land of Kafiristan, whose people haven't seen an outsider in hundreds of years. Peachy becomes lord of the kingdom's treasury, a huge chamber spilling over with limitless gold and priceless rare jewels. Danny is first crowned king, then, declared a god.</textarea>
</td>
</tr>
</table>

[Swaptor]

Ik kan het gebruik van de [code]-tags van harte aanbevelen!

[Verwijderd]

Swaptor schreef op zaterdag 11 november 2006 @ 19:45:
Ik kan het gebruik van de [code]-tags van harte aanbevelen!

Hoe werkt dat precies? Ik ben nieuw in dit forum

[EnsconcE]

Verwijderd schreef op zondag 12 november 2006 @ 11:34:
[...]


Hoe werkt dat precies? Ik ben nieuw in dit forum

Overzicht van UBB-codes #tag_code

en

Verwijderd in "[HTML] [DOM] Ophalen element attributen ..."

Het dynamisch wijzigen van hoogte van de textarea, wat jij afhankelijk wil maken van de browser, moet je oplossen door gebruik te maken van javascript. HTML is niet instaat om de browser te herkennen.

[ Voor 51% gewijzigd door EnsconcE op 12-11-2006 12:01 ]

[Verwijderd]

EnsconcE schreef op zondag 12 november 2006 @ 11:46:
[...]

Overzicht van UBB-codes #tag_code

en

Verwijderd in "[HTML] [DOM] Ophalen element attributen ..."

Het dynamisch wijzigen van hoogte van de textarea, wat jij afhankelijk wil maken van de browser, moet je oplossen door gebruik te maken van javascript. HTML is niet instaat om de browser te herkennen.

Bedankt voor de link naar de codes. Wat betreft het dynamisch wijzigen, dat week ik, en dat is mijn probleem niet. Mijn probleem is dat in Firefox een textarea zelfs met "rows=1" veel te hoog is voor mijn implementatie.