nascondere spazi vuoti

**xrwnis** · 21-12-2010, 12:18

Ciao a tutti! Vi espongo il mio problema. Ho all'interno di una pagina html un div nel quale dovrei mostrare degli indirizzi(attualmente ho utilizzato dei campi input di tipo text, ma non è indispensabile che sia fatto in questo modo). In seguito al cambio della selezione in una combo box alcuni indirizzi devono essere mostrati e alti nascosti. Vorrei che quando cambiano gli indirizzi visualizzati non venisse visualizato lo spazio vuoto. Ad esempio:
Inizialmente il div viene visualizzato in questo modo:
_____________________
| indirizzo1
| indirizzo2
| indirizzo3
| indirizzo4(nascosto)
| indirizzo5(nascosto)
| indirizzo6(nascosto)
|___________________

Dopo aver cambiato la selezione all'interno della combo box vorrei che venisse visualizzato in questo modo:
_____________________
| indirizzo4
| indirizzo5
| indirizzo6
|
|
|___________________

Per cercare di ottenere questo risultato ho creato due classi con css. Quando viene cambiata la selezione nella combo box chiamo uno script javascript in cui viene cambiata la classe dei vari elementi input. Inizialmente associo la classe nascosto agli indirizzi nascosti, e la classe visibile agli indirizzi visualizzati.

codice:

.nascosto{
	display:none;
}
.visibile{
	display:inline;
			
}

purtroppo con questo codice , dopo aver cambiato la selezione, ottengo la seguente visualizzazione:
_____________________
|
|
|
| indirizzo4
| indirizzo5
| indirizzo6
|___________________

Ho anche provato a mettere nella classe visibile le seguenti proprietà:
position: relative;
top: 0px;
ma non cambia nulla.
Spero di essere stata chiara

Grazie a tutti in anticipo

**codencode** · 21-12-2010, 15:08

Con

codice:

position: relative;
top: 0px;

non ottieni effetto perchè è come se tu stessi dicendo: trasla l'elemento verso l'alto di 0px (questo perché top abbinato a relative da' questo risultato).
Semplicemente con

codice:

.nascosto{
	display:none;
}
.visibile{
	display:inline;
			
}

gestito tramite JS come hai fatto dovrebbe già funzionare. Strano...
Comunque prova a modificare la classe .nascosto in questo modo:

codice:

.nascosto{
	display:none;
        position: absolute;
        top: -10000px;
}

**xrwnis** · 21-12-2010, 21:31

niente da fare...

ottengo lo stesso risultato...

**xrwnis** · 21-12-2010, 22:39

Ho trovato il problema!! Tra i vari campi <input> avevo messo dei
e quindi venivano nascosti i campi <input> ma non i
. Per completezza posto una versione semplificata del codice che ho utilizzato, magari sarà utile a qualcuno un giorno...

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
<html>
<head>
	
	<script type="text/javascript">
		function prova(){
			var elements= document.getElementsByTagName("input");
			for(i=0; i < elements.length; i++){
				var id=parseInt(elements[i].id);
				if(id<=3){
					elements[i].style.display = "none";
				}
				else{
					elements[i].style.display = "block";
				}
			}

		}
	</script>
</head>
<body>
	
	<div>
		<input id="1" style="display: block;" type="text"  value="ciao1"></input>
		<input id="2" style="display: block;" type="text"  value="ciao2"></input>
		<input id="3" style="display: block;" type="text"  value="ciao3"> </input>
		<input id="4" style="display: none;" type="text"   value="ciao4"></input>
		<input id="5" style="display: none;" type="text"   value="ciao5"></input>
		<input id="6" style="display: none;" type="text"   value="ciao6"></input>
	</div>
	<input type="button" value="Click" onclick="prova();"></input>
</body>
</html>

Discussione: nascondere spazi vuoti

Strumenti discussione

Ricerca discussione

Visualizza

nascondere spazi vuoti

Permessi di invio