poner scroll horizontal a un select

[chalchis]

hola amigos tengo un select con datos que son algo extensos
y la hubicacion donde debe ir el selecc es dentro de un frame que tiene de ancho 300px este es mi select

<select name="txdepa" class="selectcap">
<option value=""></option>
<option value="1">Biblioteca Bocana</option><option value="2">Biblioteca Reforma</option><option value="3">Caja</option><option value="4">Comunicación y Publicidad</option><option value="5">Coordinación Administrativa Bocana</option><option value="6">Coordinación Operaciones de Red</option><option value="7">Coordinación de Posgrados</option><option value="8">Desarrollo Sustentable</option><option value="9">Dirección de Sistemas</option><option value="10">Dirección General</option><option value="11">Diseño</option><option value="12">Finanzas</option><option value="13">Planeación Educativa</option><option value="14">Promoción</option><option value="15">Psicopedagógico</option><option value="16">Rectoria</option><option value="17">Servicios Escolares</option> </select>

amigos como podria recortar el select digamos 120 px pero que el usuario pueda ver todo el texto porque si lo recorto con css a 120px queda mocho

existira alguna manera de scrollear el select de manera horizontal o si conocen alguna otra manera??

saludos espero sus comentarios

[KarlanKas]

Esto funciona muy bien en firefox pero horriblemente mal en IE:

<select name="txdepa" class="selectcap" style="width:150px;" onFocus="this.style.width='300px'" onChange="this.style.width='150px'">

Tal vez sea un buen comienzo.

[chalchis]

ok amigo Karlankas lo probare

saludos

Iniciado por KarlanKas

Esto funciona muy bien en firefox pero horriblemente mal en IE:

<select name="txdepa" class="selectcap" style="width:150px;" onFocus="this.style.width='300px'" onChange="this.style.width='150px'">

Tal vez sea un buen comienzo.

[chalchis]

efectivamente karlankas funciona bien en firefox y en ie nop
en realidad estaba pensando que la posible solucion seria emular un select es decir poner un text y junto un boton y que al darle click se despliegue una
capa mas o menos como los calendarios

ejemplo http://www.blueshoes.org/en/javascript/datepicker/

pero la verdad no tengo idea de como sea hace

espero me puedan ayudar

saludos

[php.java.jsp]

existira alguna manera de scrollear el select de manera horizontal o si conocen alguna otra manera??

porque no metes el select dentro de un div con scroll

<div style="width: 150px;overflow: auto">
<select><option> ...
</div>

[chalchis]

no estaria mal, pero para caso de presentacion hacia el usario no se veria el boton de despliegue por las circustancia de que los textos de select son algo largos tendria

que desplegar el scroll

o no crees saludos

y gracias por contestar

[php.java.jsp]

posible solucion a ese problema (en internet explorer)

Código:

<select dir="rtl">

[chalchis]

hey men disculpa mi ignorancia
pero a que te refieres con <select dir="rtl">

saludos
y disculpa

Iniciado por php.java.jsp

posible solucion a ese problema (en internet explorer)

Código:

<select dir="rtl">

[php.java.jsp]

significa que la navegacion va de derecha a izquierda (rigth to left = rtl)

[chalchis]

ahh orale
lo probare

Iniciado por php.java.jsp

significa que la direccion del texto va de derecha a izquierda (rigth to left = rtl)

[chalchis]

Hola men ya lo puese dentro de un div pero el problema es que al deplegar la informacion hace omision al div

mira

<div id="depdiv" style="width:100px; overflow:auto">
<select name="txdepa" dir="rtl" class="selectcap" >
<option value=""></option>
<option value="1">Biblioteca Bocana</option><option value="2">Biblioteca Reforma</option><option value="3">Caja</option><option value="4">Comunicación y Publicidad</option><option value="5">Coordinación Administrativa Bocana</option><option value="6">Coordinación Operaciones de Red</option><option value="7">Coordinación de Posgrados</option><option value="8">Desarrollo Sustentable</option><option value="9">Dirección de Sistemas</option><option value="10">Dirección General</option><option value="11">Diseño</option><option value="12">Finanzas</option><option value="13">Planeación Educativa</option><option value="14">Promoción</option><option value="15">Psicopedagógico</option><option value="16">Rectoria</option><option value="17">Servicios Escolares</option> </select>
</div>

Iniciado por chalchis

hey men disculpa mi ignorancia
pero a que te refieres con <select dir="rtl">

saludos
y disculpa

[php.java.jsp]

no entiendo a que te refieres con "hace omision"

por cierto al div aun le hace falta establecer el alto

<div "style=height:100px;width:120px">

[chalchis]

hace omision a que cuando despliego el select la lista se despliega sobre el div
pense que se deplegaria dentro del div

[chalchis]

hola amigos logre una posible solucion este es index
de frames

<HTML>
<HEAD>
<title>test</title>
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
</HEAD><frameset rows="49,*,30" frameborder="NO" border="yes" framespacing="0">
<frame src="#" name="menu" scrolling="NO" frameborder="0" marginheight="0" marginwidth="0" noresize>
<frameset id="ocultarframe" cols="*,300" frameborder="NO" border="yes" framespacing="0">
<frame src="#" name="zona" scrolling="NO" frameborder="0" marginheight="0" marginwidth="0" noresize>
<frame src="test2.htm" name="send" scrolling="NO" frameborder="0" marginheight="0" marginwidth="0" noresize>
</frameset>
<frame src="#" name="base" scrolling="NO" frameborder="0" marginheight="0" marginwidth="0" noresize>
</frameset></HTML>



****************
este el form archivo llamado test2.htm

<html>
<head>
<script type="text/javascript">
function aparecer(obj)
{
cap=document.getElementById('capa');
cap.style.display=(obj.value=='<') ? 'block' : 'none';
obj.value=(obj.value=='<') ? '>' : '<';
}

function datosel(idep,desc)
{
document.forms.formulario.clavedep.value=idep;
document.forms.formulario.deptex.value=desc;
document.forms.formulario.lista.value="<";
aparecer('<')

}
</script>
</head>
<body>
<form name="formulario" method="POST" action="">
<input type="text" name="clavedep">
<table width="288" border="0" align="left" cellpadding="1" cellspacing="0">
<tr>
<td width="100" valign="top"><div align="right">Departamento:</div></td>
<td width="182"><input type="text" name="deptex">
<input name="lista" type="button" onClick="aparecer(this)" value="&lt;" />
<div id="capa" style="display:none; width:170px; height:120px; overflow:auto">
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('1','Biblioteca Bocana')">
<td width="15">1</td>
<td width="279">Biblioteca Bocana</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('2','Biblioteca Reforma')">
<td>2</td>
<td>Biblioteca Reforma</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('3','Caja')">
<td>3</td>
<td>Caja</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('4','Comunicaci&oacute;n y Publicidad')">
<td>4</td>
<td>Comunicaci&oacute;n y Publicidad</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('5','Coordinaci&oacute;n Administrativa Bocana')">
<td>5</td>
<td>Coordinaci&oacute;n Administrativa Bocana</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('6','Coordinaci&oacute;n Operaciones de Red')">
<td>6</td>
<td>Coordinaci&oacute;n Operaciones de Red</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('7','Coordinaci&oacute;n de Posgrados')">
<td>7</td>
<td>Coordinaci&oacute;n de Posgrados</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('8','Desarrollo Sustentable')">
<td>8</td>
<td>Desarrollo Sustentable</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('9','Direcci&oacute;n de Sistemas')">
<td>9</td>
<td>Direcci&oacute;n de Sistemas</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('10','Direcci&oacute;n General')">
<td>10</td>
<td>Direcci&oacute;n General</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('11','Dise&ntilde;o')">
<td>11</td>
<td>Dise&ntilde;o</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('12','Finanzas')">
<td>12</td>
<td>Finanzas</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('13','Planeaci&oacute;n Educativa')">
<td>13</td>
<td>Planeaci&oacute;n Educativa</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('14','Promoci&oacute;n')">
<td>14</td>
<td>Promoci&oacute;n</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('15','Psicopedag&oacute;gico')">
<td>15</td>
<td>Psicopedag&oacute;gico</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('16','Rectoria')">
<td>16</td>
<td>Rectoria</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('14','Servicios Escolares')">
<td>17</td>
<td>Servicios Escolares</td>
</tr>
</table>
</div> </td>
</tr>
<tr>
<td><div align="right">Campo2:</div></td>
<td><input type="text" name="textfield22"></td>
</tr>
<tr>
<td><div align="right">Campo3:</div></td>
<td><input type="text" name="textfield23"></td>
</tr>
<tr>
<td><div align="right">Campo4:</div></td>
<td><input type="text" name="textfield2"></td>
</tr>
</table>
</form>

</body>
</html>

el detalle es nose como hacer que el div al momento de aparecer pase encima de los campos que estan abajo

espero me puedan ayudar
saludos