Allora, ho una serie di DIV che contengono ognuno una textbox e una lista. Tutti gli elementi sono floattati. La lunghezza di INPUT, se non settata, ha sempre una lunghezza fissa di tot pixel. Con javascript ho creato una funzione, richiamata dall'evento Load del tag BODY, che forza la lunghezza di INPUT secondo la lunghezza di UL. Purtroppo sembra che non venga eseguita nessuna delle istruzioni della funzione, tant'è che ho provato ad aggiungere in seconda riga un alert che non viene visualizzato. Il problema a questo punto presumo venga dal metodo getElementsByClassName, ma non capisco il perchè...
Eccovi il breve listato con il quale potrete verificare con i vostri occhi:
codice:
<html>
<head>
<style type="text/css">
/*<![CDATA[*/
div { float: left; border: 1px solid red; }
input { float: left; }
ul { clear: left; float: left; list-style-type: none; margin: 0; border: 1px solid blue; padding: 0; }
/*]]>*/
</style>
<script type="text/javascript">
<!--
function adattaBoxes() {
var comboboxes = document.getElementsByClassName("combo");
alert("ci sono "+comboboxes+" combobox");
for (var i = 0; i < comboboxes.length; i++) {
var txt = comboboxes[i].getElementsByTagName('INPUT')[0];
var lista = comboboxes[i].getElementsByTagName('UL')[0];
txt.style.width = lista.offsetWidth;
}
}
//-->
</script>
</head>
<body onload="adattaBoxes();">
<div id="giorno_s" class="combo">
<input type="text" />
<ul>[*]lunedì[*]martedì
...omissis...[*]domenica[/list]
</div>
<div id="giorno_n" class="combo">
<input type="text" />
<ul>[*]1[*]2
...omissis...[*]31[/list]
</div>
<div id="mese" class="combo">
<input type="text" />
<ul>[*]gennaio[*]febbraio
...omissis...[*]dicembre[/list]
</div>
</body>
</html>