Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/04/2012, 22:22
Avatar de romel_inc
romel_inc
 
Fecha de Ingreso: diciembre-2007
Ubicación: Venezuela-monagas
Mensajes: 288
Antigüedad: 17 años
Puntos: 14
alguna idea para hacer que el scroll en eje x funcione

Tengo una caja con tamaño fijo, su contenido crece dinámicamente en el eje x.

Intente aplicar overflow-x: scroll; sucede que muestra el scroll pero no cambia, cuando el contenido aumenta.

Analógicamente lo que intento hacer es apilar una caja al lado de la otra dentro de un contendedor con ancho fijo, a alcanzar el ancho fijo salga el scroll x al rescate, para que la cajas no bajen a una segunda linea y aparezca el no deseado scroll en eje y.

ulMenu {
float: left;
overflow: auto;
height: 100px;
width: 180px;
border-right: 1px solid;
background-color: aliceBlue;
}

nota: el ancho de este contenedor esta definido por un elemento padre.

Código:
<div id="menu" style="overflow: hidden; border: 1px solid black; height: 170px;overflow-x: scroll;">
	<div class="ulMenu" id="default-options">
		<div class="liMenu li-selected" id="1"> Tarjetas Madre</div>
		<div class="liMenu" id="7"> element </div>
		<div class="liMenu" id="10"> sub element 1</div>
		<div class="liMenu" id="11"> sub element 2</div>
		<div class="liMenu" id="12"> sub element 3</div>
		<div class="liMenu" id="13"> sub element 4</div>
		<div class="liMenu" id="14"> sub element 5</div>
		<div class="liMenu" id="15"> sub element 6</div>
		<div class="liMenu" id="16"> sub element 7</div>
		<div class="liMenu" id="17"> sub element 8</div>
		<div class="liMenu" id="18"> sub element 9</div>
		<div class="liMenu" id="19"> sub element 10</div>
		<div class="liMenu" id="20"> sub element 11</div>
	</div>
	<div class="ulMenu" id="dependent-options-7863">
		<div id="2" class="liMenu li-selected"> element 1 </div>
	</div>
	<div class="ulMenu" id="dependent-options-6006">
		<div id="3" class="liMenu li-selected"> element 2</div>
	</div>
	<div class="ulMenu" id="dependent-options-5758">
		<div id="4" class="liMenu li-selected"> element 3</div>
	</div>
	<div class="ulMenu" id="dependent-options-8103">
		<div id="5" class="liMenu li-selected"> element 4</div>
	</div>
	<div class="ulMenu" id="dependent-options-13192">
		<div id="6" class="liMenu"> element 5</div>
		<div id="8" class="liMenu"> element 6</div>
		<div id="9" class="liMenu"> element 7</div>
	</div>
</div>
saludos.
__________________
Lo que se usar (JAVA, Spring MVC, IntelliJ IDEA , GAE, CakePHP, Bootstrap, Underscorejs, jQuery, HTML5, CSS3, JSON, Ajax, Prototype), Aprendiendo a usar Angularjs y Git.