| Autor | Zpráva | ||
|---|---|---|---|
| priselodjinud Profil * |
#1 · Zasláno: 8. 1. 2009, 13:01:00
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 |
#2 · Zasláno: 8. 1. 2009, 13:04:29
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 |
#3 · Zasláno: 8. 1. 2009, 13:26:20
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 |
#4 · Zasláno: 8. 1. 2009, 13:41:40
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 * |
#5 · Zasláno: 8. 1. 2009, 14:36:09
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 |
#6 · Zasláno: 8. 1. 2009, 15:20:34 · Upravil/a: Plaváček
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 * |
#7 · Zasláno: 8. 1. 2009, 15:34:33
|
||
| priselodjinud Profil * |
#8 · Zasláno: 8. 1. 2009, 15:41:49
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 |
#9 · Zasláno: 9. 1. 2009, 08:12:16
priselodjinud
Standardními prostředky CSS nic takového nevymyslíš (respektive, fungovat to bude pouze v IE). |
||
| priselodjinud Profil * |
#10 · Zasláno: 9. 1. 2009, 10:30:23
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=""; } } |
||
|
Časová prodleva: 15 let
|
|||
0