Script javascript: Select a larghezza fissa in explorer

   difficoltà:  script script script script script

Script simili
13/5/2007


Può capitare di dover inserire un menù a tendina in un box, o comunque in uno spazio limitato, nonostante il contenuto della select contenga dei campi option piuttosto lunghi. Chi avrà provato a dare uno stile, attraverso css, ai campi select in modo tale da dargli dimensione fissa si sarà accorto che mentre in firefox il tutto funziona correttamente, in explorer non è così. In entrambi i browser infatti la select tiene la dimensione data attraverso l'attributo width, ma mentre in firefox quando si clicca sul menu a tendina si può leggere il contenuto completo delle opzioni, in explorer queste vengono tagliate alla lunghezza prestabilita.
Con questo script vedremo come risolvere la questione con un piccolo javascript.
Per cominciare ecco uno screenshot della situazione. A sinistra la visualizzazione in firefox al momento della selezione, a destra in explorer.


javascript - select width

Come si può notare il testo contenuto nelle option viene tagliato.

Lo script che propongo si occuperà di cambiare l'attributo width della select al momento della selezione, rendendo quindi il campo più lungo finchè si ha il focus sul menù a tendina, dando il tempo quindi di scegliere una delle voci, per poi tornare della dimensione stabilita al momento in cui il focus passa su un altro campo del form.
Questo saà quindi il risultato su entrambi i browser.


javascript - select width

Questo lo script completo:
<script>
function allarga(){
document.getElementById('contentselect').style.width="300px";
document.getElementById('selectname').style.width="300px";
}
function stringi(){
document.getElementById('contentselect').style.width="130px";
document.getElementById('selectname').style.width="130px";
}
</script>
<div id="boxsearch" style="width:150px; height:200px;padding:5px;border:1px solid #000000;">
<div id="contentselect" style="width:130px;position:absolute;">
<select name="selectname" id="selectname" style="width:130px;" onfocus="allarga()" onblur="stringi()">
<option value="">seleziona</option>
<option value="">1234567890123456789012345678901234567890</option>
<option value="">1234567890123456789012345678901234567890</option>
<option value="">1234567890123456789012345678901234567890</option>
</select>
</div>
<br><br><input type="text" style="width:130px;">
</div>
Come si vede di da innanzitutto al contenitore della select una posizione absolute in modo da poter andare sopra gli altri elementi al momento della selezione, quindi di uscire anche dal box se necessario. Poi all'evento onfocus associamo la funzione allarga() che si occupa di cambiare l'attributo width sia del contenitore della select che della select stessa. All'evento onblur, quindi al passaggio a un altro campo del form, la funzione stringi() fa tornare l'attributo width al valore iniziale.




Commenti


  gabriele

15/10/2007 10:18:39

ciao. ho provato il codice che hai scritto ma non funziona! io ho internet ezplorer 6 e continua a tagliare il testo contenuto nella select...

  Fabio

15/10/2007 10:33:06

A me funzia anche su ie6.
Devi cmq cambiare il width 130 e 300 a seconda della larghezza che ti necessita. Hai provato a copiare e incollare esatamente il codice? Non funziona?
Devi stare attent che anche come crei il contenitore è importante. il div non deve avere overflow hidden. Anche con le tabelle potresti avere qualche problema

  Sabrina Vallenari

30/5/2008 15:18:22

Io ho fatto così e mi sembra meglio:


<TD>
<SELECT id=ModPag style='position:absolute;width:100%' onmousedown=""this.style.width='300px';this.focus()"" onblur=""document.getElementById('modPag').style.width='100%';"" onChange='this.blur()'>
<OPTION value=SI>SI</OPTION>
<OPTION value=NO>NO</OPTION>
</SELECT>
</TD>


  Fabio

30/5/2008 15:39:39

@Sabrina:
se metti il tuo codice nel div dell'esempio in ie7 non va..



Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.