Autor Zpráva
priselodjinud
Profil *
Ahoj, chtel bych se zeptat, jak udelat, aby se <input type='text' ... /> roztahl na 100% sirky <td> tabulky s nedefinovanou velikosti ?
Zkousel jsem vsechno mozny, ale FF se chova imho fakt divne:
- v pripade "kratkeho" textu (napr: "Roztahovaci text") se INPUT natahne na nesmyslne velkou sirku.
- pro delsi text ("Roztahovaci text jeste o neco delsi") uz spranve sirka INPUTu kopiruje sirku textu.
navic komplikace xhtml1:
DTD xhtml1.0 zaruci, ze input vzdycky o kousek preleze okraj bunky a to i v pripade, ze je
(1) <table cellspacing='0' cellpadding='0'>
(2) *{
padding:0;
margin:0;
}

Dik za pripadne tipy (googlil jsem fest).

Kod:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>

<table>
<tr><td>Roztahovaci text</td></tr>
<tr><td><input type='text' style='width:100%' /></td></tr>
</table>

</body>
</html>
imploder
Profil
Vnější element (tj. buňka tabulky) by měl mít definovanou šířku, aby bylo podle čeho ty procenta napočítat (počítá se vždycky podle vnějšího elementu).
Bubák
Profil
Nebude to "náhodou" tak, že input je inline a proto mu nejde deklarovat šířku?
<input type="text" style="display: block;width: 100%">

Snad všechny elementy se jako blokové roztáhnou na celou dostupnou šířku, ale koukám, že pro INPUT to neplatí a 100% šířku jsem musel explicitně deklarovat.
Plaváček
Profil
Bubák

Jo, ale input není typický inline element, alébrž nahrazovaný (podobně jako img) a ve výchozích stylopisech prohlížečů má nadefinován nějaký výchozí rozměr. Takže prostou deklaraci display:block ho samozřejmě na 100% šířky nadřazeného elementu neroztáhneš.
priselodjinud
Profil *
jj. zkousel jsem ho dat i na display:block, ale nezadarilo se. Vnejsi element bohuzel natvrdo nastavit nemuzu.

Jedna se o "datagrid" - tzn. takovou tu tabulku, ktera zobrazuje n-tou stranku m-zaznamu z nejake tabulky databaze. Chci, aby se tabulka nafoukla podle potreby - tzn. zadna fixni sirka na zacatku, tudiz ani sloupce nechci definovat, porad mi ale pripada,ze by melo byt mozne inputu v bunce rict, at se na roztahne na 100%. Jednak to funguje v MIE a nakonec i v tom FF, pri sirsich sloupcich.

Zatim vidim jen reseni javascriptem ?
Plaváček
Profil
priselodjinud

Při nejlepší vůli ti nerozumím. Input se natáhne na celou šířku buňky (pokud mu zadáš width:100%), bez ohledu na to, jestli jsi nějaký rozměr definoval. Možná bys mohl udělat nějakou živou ukázku, čeho že to vlastně chceš dosáhnout.

P.S.

Tenhle kód, kupříkladu, mi funguje, jak se očekává:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Input</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
table {
	border-collapse:collapse;
	margin: 0 0 15px 0
}
td {
	padding: 5px 10px 5px 5px;
	background: #ececec
}
input {
	width: 100%;
}
-->
</style>
</head> 
<body> 
<form>
<table> 
<tr><td>Krátký</td></tr> 
<tr><td><input  type='text' style='width:100%' /></td></tr>
</table> 
<table>
<tr><td>Roztahovaci dlouhý text jak jenom chceš</td></tr> 
<tr><td><input  type='text' style='width:100%' /></td></tr>  
</table>
</form>
</body> 
</html>

priselodjinud
Profil *
[#6]

Diky za ochotu.
V MIE to skutecne vypada jak ma, ale FF 2.0.0.20 zobrazuje takle (nevim, jak jine verze):
ukazka
S tim prvnim, kratkym textem se INPUT nafoukl podle plotu ... resp. nevim podle ceho.
priselodjinud
Profil *
Takze jen pro strucnost bych to znovu shrnul tak, ze bych rad pod DTD xhtml1.0 pro Firefox docilil toho, aby se v nasledujicim kodu zobrazil INPUT se sirkou ne vetsi nez je sirka textu v bunce nad nim (tak jak se zobrazuje v MIE). Resp. klidne muze byt ten input oriznuty o par px, tak jako v MIE.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>t</title>
</head>
<body>

<table border='1'>
<tr><td>Kratky text</td></tr>
<tr><td><input type='text' style='width:100%' /></td></tr>
</table>

</body>
</html>
Plaváček
Profil
priselodjinud

Standardními prostředky CSS nic takového nevymyslíš (respektive, fungovat to bude pouze v IE).
priselodjinud
Profil *
Pffff, co se da delat no, dik za pomoc.
Pokud by to nekdo taky resil, prikladam nastrel (odpovida mym potrebam, necht si pripadne nekdo zmeni) reseni v JS:


/* sId je id html elementu, ktery obsahuje inputy se jmennou konvenci
sId + "_filter". Vsechny tyhle inputy se postupne skryji (aby neovlivnovaly sirku uzsiho sloupce)
zjisti se sirka sloupce, zjistena sirka se nastavi zpatky absolutne inputum a ty se zase zobrazi.
*/
function vwr_fixFilterWidths(sId)
{
var o = document.getElementById(sId);
if(o == null)
{
alert("Cannot find element [" + sId + "]");
return;
}

var els = o.getElementsByTagName('INPUT');
var name = sId + "_filter";

for(var i=0;i<els.length;i++)
{
var el = els.item(i);
if(el.type != 'text' || el.name.indexOf(name)!=0) continue;
el.style.display="none";
el.style.width = (el.parentNode.offsetWidth-15)+"px";
el.style.display="";
}
}

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: