Campo input type text 100%

[ricman]

Un campo Input di tipo Text con larghezza impostata al 100% sfora sempre dal proprio contenitore (es un Div).

Come mai?

Esempio:

<div style="300px"><input type="text" value="prova" style="width=100%" >

[ricman]

Per la precisione un esempio così (ho usato un doctype html strict).

<div style="width:300px; height:100px; background-color:green; padding: 10px 12px 0 0 ">
	<form>
		<input type="text" value="testone" style="width:100%; border:6px solid lime; background-color:red;" />
	</form>
</div>

Dimostra che il campo input sfora della misura uguale alla somma dei bordi laterali.

Mi sembra alquanto sprovveduto dover specificare ogni volta le misure, lavorare coi padding, misurare, impazzire etc etc etc... No?

Cosa mi sfugge?

[ispuk]

ricman ciao,scusa ma hai già provato senza specificare width:100% ,mettendo margin e padding : 0?non dovrebbe occupare di default tutta la dimensione del div contenitore un div figlio?!?

non so se mi sbaglio ma la misure in % sono relative alla finestra browser,credo che non vengano interpretate rispetto al div che lo contiene.

prova magari mi sbaglio

[ricman]

Originariamente inviato da ispuk
hai già provato senza specificare width:100% ,

...non mi interessano le dimensioni fisse (tra l'altro in questo modo sarebbe bastato togliere qualche px ...)

Originariamente inviato da ispuk
mettendo margin e padding : 0?

è uguale... (hai provato?)

Originariamente inviato da ispuk
non so se mi sbaglio ma la misure in % sono relative alla finestra browser,credo che non vengano interpretate rispetto al div che lo contiene.

Saranno % rispetto a chi lo contiene... no? Altrimenti perchè mai verrebbe lungo 312px nell'esempio che ho fatto??

[Tux7000]

Ti posto il risultato del tuo codice sul mio Firefox 3.0.12
Per sforare intendi che ignora il padding laterale da 12px impostato? Succede anche a me, mentre il padding top viene visualizzato correttamente.

Normalmente faccio che dare un margin direttamente al form così risolvo il problema.

<div style="width:300px; height:100px; background-color:green; padding: 10px 12px 0 0; ">
<form style="margin: 20px">
<input type="text" value="testone" style="width:100%; border:6px solid lime; background-color:red;" />
</form>
</div>

[ispuk]

ricman ,scusa ma alcune cose ancora mi sfuggono ,anzi ti ringrazio dei chiarimenti

[ricman]

Originariamente inviato da Tux7000
Ti posto il risultato del tuo codice sul mio Firefox 3.0.12
Per sforare intendi che ignora il padding laterale da 12px impostato? Succede anche a me, mentre il padding top viene visualizzato correttamente.

Colpa mia... ho posta il codice "corretto"
Purtroppo è corretto non_si_sa_bene_per_chi!!
Cioè... perchè la parte sinistra considera il bordo DENTRO il cotenitore mentre la parte destra No?

Vorrei non dover fare conti su conti... (sto facendo un layout per un'applicazione molto dinanmica con molte possibilità di layout).
Vorrei poter lavorare senza pensare ogni volta "padding Si, padding No" ... Possibile che una soluzione corretta UNICA non esista?

[Tux7000]

Ciao ricman,
l'unica soluzione che mi viene in mente (l'ho testata solo su Firefox però) è questa:

<div style="width:300px; height:100px; background-color:green; padding: 10px 12px 0 0; ">
<form style="margin-left: 12px">
<input type="text" value="testone" style="width:100%; border:6px solid lime; background-color:red;" />
</form>
</div>

Non so se possa esserti utile...


Edit:
ho trovato questo link:
http://stackoverflow.com/questions/6...eir-containers

Prova a darci un'occhiata.

[Mich_]

E` il "solito" problema del box-model, anzi dei diversi box-model che hanno i browser standard ed i browser IE.

Per una spiegazione "come si deve" ti rimando ai vari tutorial HTML/CSS che trovi in giro, ma ti lascio anche la spiegazione "succinta":

La larghezza totale di un blocco (browser standard) e` data da:
margin + border + padding + width + padding + border + margin
In IE (quirks mode) invece e` data da:
margin + width + margin (border e padding fanno parte di width)

Chiaramente nel tuo esempio il blocco e` largo 100% piu` i bordi e padding, quindi e` maggiore di 100% (con tutte le conseguenze del caso).

[ricman]

Originariamente inviato da Mich_
Chiaramente nel tuo esempio il blocco e` largo 100% piu` i bordi e padding, quindi e` maggiore di 100% (con tutte le conseguenze del caso).

Tu che sei in grado "di ragionare come loro" ...sei anche d'accordo?
Insomma ... io faccio, ad esempio, una campo Input dentro un div. Se voglio lavorare con i bordi per evidenziare il focus o per far vedere che il campo è attivo o meno, sono costretto a calcolare (scomodamente) ogni variazione (quando aggiungo il bordo tolgo il padding.. etc ...etc..).
E se sono in una singola paginetta di un sito va bene ... ma dentro un programma complesso con oggetti, funzioni e compagnia bella che creano i tag input al volo... diventa una casino far combaciare le possibiità...
...mi sembra...