alguna idea para hacer que el scroll en eje x funcione

[romel_inc]

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.

[cristian_cena]

Para que la idea "scroll al rescate" se haga realidad necesitas javascript. En concreto detectar los anchos+margin+padding+border de los elementos contenidos y realizar la acción deseada cuando la suma de ellos supere al ancho del contenedor.
Respecto de la propiedad overflow, este link te puede servir: http://www.brunildo.org/test/Overflowxy2.html

Saludos.

[kseso?]

Este selector es erróneo:

Código CSS:

ulMenu {}
 

O es una lista con clase "menú" (ul.menu {} y en el html <ul class="menu">) o es un selector y entonces falta un punto (.) o almohadilla (#) precediendolo:
En el css: .ulmenu y en el html: <elemento class="ulmenu">

Y no se cuál es su intención porque declara:

Código CSS:

<div id="menu"...
   <div class="ulMenu"...
 

Adenda:
Esto tampoco le ayudará:

Código HTML:

<div id="6"...
 

Selectores iniciados por un numeral = estrepitoso fallo total

[romel_inc]

Cristian , tremenda guía amigo y idea muchas gracias

al terminar te comento.

saludos.

************************************************** *
kseso

amigo como son varios los comentarios los voy a subtitular jeje ok.

la primera:

son fan de las convenciones, si no tomaste la idea es porque no estoy escribiendo bien supongo, si tienes una guía por hay acerca de convenciones en css, te lo agradecería mucho.

En si es un menu simple, como este

Código:

<div id="menu">
	<ul class="ulMenu" id="default-options">
		<li class="liMenu" id="15" ></li>
		<li></li>
		<li></li>
		<li></li>
	<ul>
	<ul class="ulMenu" id="dependent-options-13192" >
		<li id="3" class="liMenu li-selected" ></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
<div>

solo que escribí un código en prototype que le es indiferente si los elementos son ul li o div. ambos menus son equivalentes y como notaras soy fan de los div's jeje.


segundo

me llama ta atención que digas "Selectores iniciados por un numeral = estrepitoso fallo total"

puedo hacer que los id empiecen por espacio de nombre o namespace y luego el id de la categoría, posteriormente extraer el id.

supongo que lo dices así por es un convención que empiece por una letra, verdad ?

ese id del li esta basado en id del registro de la categoría en la base de datos, por lo tanto no es algo fijo y como se que en toda la app no va a ver un div con un id numérico, lo vi bien para el momento en que lo escribí.

pero nada mejor que una imagen para espesar la idea verdad! Jeje





Agradezco su feedback, muchas gracias.

[kseso?]

Iniciado por romel_inc

kseso

amigo como son varios los comentarios los voy a subtitular jeje ok.

la primera:

son fan de las convenciones, si no tomaste la idea es porque no estoy escribiendo bien supongo, si tienes una guía por hay acerca de convenciones en css, te lo agradecería mucho.
Fíjese en la diferencia:

Conveniencia:
1. f. Ajuste y concierto entre dos o más personas o entidades.
2. f. Conveniencia, conformidad.
3. f. Norma o práctica admitida tácitamente, que responde a precedentes o a la costumbre.

Norma:
1. f. Regla que se debe seguir o a que se deben ajustar las conductas, tareas, actividades, etc.

No es una conveniencia, es una regla o norma de obligado cumplimiento. Al menos para todos, no se si usted será la excepción.
Lo mejor es dirigirse a la página del consorcio (w3.org) o en castellano al sidar.org Páginas hay muchas, ninguna con la garantía de oficialidad de esas dos. Una puede ser librosweb.es

En si es un menu simple, como este

Código:

<div id="menu">
	<ul class="ulMenu" id="default-options">
		<li class="liMenu" id="15" ></li>
		<li></li>
		<li></li>
		<li></li>
	<ul>
	<ul class="ulMenu" id="dependent-options-13192" >
		<li id="3" class="liMenu li-selected" ></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
<div>

Que podría ser un menú hasta ahí sí llegué. Otra cosa muy diferente es su divitis aguda. Lo que no se deduce de su código inicial es si era una clase (.ulMenu) mal escrita o una lista a la que le aplica una clase (ul.Menu) también mal escrita.
Según este último css debe tener dos reglas css diferentes. Una cuyo selector sea ul.liMenu {} y otra li.liMenu{} Respeto su grafía de la M (en mayúscula) pero es indiferente aunque, ahora sí, la convención es escribir en minúsculas.
solo que escribí un código en prototype que le es indiferente si los elementos son ul li o div. ambos menus son equivalentes y como notaras soy fan de los div's jeje.
Que al prototipe ese le sea indiferente no quita para que sea una mala práctica (la divitis) y un error (su declaración del selector)

segundo

me llama ta atención que digas "Selectores iniciados por un numeral = estrepitoso fallo total" y lo mantengo y me reafirmo

puedo hacer que los id empiecen por espacio de nombre o namespace y luego el id de la categoría, posteriormente extraer el id.
Sí, y los id y clases los puede identificar por cualquier símbolo a su libre elección. La cuestión es lo que obtendrá= estrepitoso fallo total

supongo que lo dices así por es un convención que empiece por una letra, verdad ?
Le remito a la diferencia entre convención y norma que le apunto antes.

ese id del li esta basado en id del registro de la categoría en la base de datos, por lo tanto no es algo fijo y como se que en toda la app no va a ver un div con un id numérico, lo vi bien para el momento en que lo escribí.
Usted lo puede hacer por la razón que quiera o tenga a bien. Otra cosa es qué van a hacer los agentes de usuario con los selectores que comienzan por un numeral. ¿No le resultó curioso que ningún selector comenzase por un dígito?

pero nada mejor que una imagen para espesar la idea verdad! Jeje





Agradezco su feedback, muchas gracias.

Soluccione primero esos errores y si sigue sin aparecer su scroll posiblemente no sea por la regla css que publicó sino por los estilos del contenido de esa caja que engloba a todo (los li) que los haya sacado del flujo (float o position)

[cristian_cena]

A juzgar por la captura, quizas solo deba declarar overflow:auto; al contenedor de la derecha (para que cuando su contenido supere en ancho, justo ahí aparezca el scroll) al menos como valor "por defecto" y en adelante (de necesitar algo más avanzado) meter mano a javascript.
Podría animarse a usar otras etiquetas más allá de div y span, de hecho, solo debe distinguir el aporte semántico y tener en cuenta el tipo de elemento.

[romel_inc]

cristian ya logre el objetivo.



El asunto era modificar el ancho del div según la cantidad de elementos, al superar el ancho de elemento padre, este tendría que actualizar el scroll.

Y en efecto como expesaste en tu segunda opinión con solo declarar overflow:auto, sobre el elemento padre es suficiente.

Y por supuesto estimado, excelente aporte también! Los links referenciados.

Aquí en crudo el código resultante:

Código:

			currentElements = $('menu').childElementCount 
			newCurrentElements = currentElements + 1 
			newWidth = newCurrentElements * 181
			
			$('menu').setStyle({
			  width: newWidth+'px'
			});

Cristian tu primera intervención fue magistral, sin duda alguna fue la que mas ayudo. Muchas gracias.

Si alguna ves usas cakephp o prototype no dudes es preguntar, yo me la paso por acá: https://groups.google.com/forum/?hl=...um/cakephp-esp


kseso, kseso.

Jeje. divitis aguda. Chamo si me reí con eso. Jeje. noto que eres todo un hacker en css, tienes un excelente blog también, supongo que es por eso que no soportas ver código que no sea valido.

me insiste recordar esta caricatura:



ahora mi interés es terminar mi sistema, yo solo estoy con cakephp, prototype, scripty2-aprendiendo, jquery mas que todo los plugins, la parte de servidor. toda vía me falta lidiar con el firewall, router, etc. El punto es que primero tengo que terminar la lógica, luego me ocupare de validar el html y la cascada.


Por otro lado, en la web todo se trata de convenciones -- mejores usos y costumbres --. de no ser así lo que yo estoy escribiendo no funcionara. De ser una regla no tendrías problemas en analizar un código por que todo seria prácticamente igual. Pero todo tiende a mejorar, un ejemplo analógico: para clavar un clavo no necesito de un martillo, con una piedra también sirve. solo que un martillo seria lo mas común al pensar en eso.

los frameworks un ejemplo valido también, existen cualquier cantidad de ellos que te pueden ayudar hacer mejor el trabajo.

por eso te pregunte sobre convenciones.

w3.org es una entidad que esta formado por un grupo de personas que se encargan de debatir sobre las mejores practicas, usos y costumbres al desarrollar algo y ellos liberan esas ideas como una especificación. de ser una norma la web como la conocemos no sera la misma cada ves que ellos saque una nueva especificación, seria como un tsunami prácticamente.


Bueno ya!, jejej, interesante post, interesante opiniones, muchas gracias kseso, cristian, saludos y Feliz Día!

[kseso?]

Gracias.
Lo de divitis aguda no es de mi cosecha. Es algo que viene de muy atrás.

Veo que aun no diferencia entre convención y norma o regla.
A ver si con un ejemplo:
Por convención primero se saluda al tendero, después se pide lo que uno necesita, se paga y tras despedirse se marcha uno.
Puede cambiar el orden o incluso omitir cualquiera de los pasos, excepto el pedir lo que quiere al menos que el dependiente sea adivino. Obtendrá su pedido siendo más o menos educado, o si no paga, más o menos honesto.

La norma/regla (en este caso ley) es que para entrar y salir debe asegurarse que la puerta está abierta o abrirla. Sin esa condición...

Pues lo mismo con el código css (en este caso). Es obligatorio escribir bien los selectores, las propiedades y valores válidos. Un fallo en cualquiera de esto y el código no funcionará. No por conveniencia. Es porque los agentes de usuarios (normalmente y casi todos) como poco lo ignorarán. Y como mucho el resultado será un fiasco.

Y por cierto, a esta sugerencia/adivinación por mi parte:

...sino por los estilos del contenido de esa caja que engloba a todo (los li) que los haya sacado del flujo (float o position)

la conclusión lógica e implícita es que debería limpiar los float que es lo que diréctamente le sugirió Cristian que cada día que pasa potencia un poco más su lado "visionario" xD

Me alegro que lo solucionase.

[cristian_cena]

Recibir elogios de quien he aprendido tanto me da mucha satisfacción.
Se agradece el ánimo de ayudar, en algún momento seguro lo voy a necesitar.
Gracias a ambos, me alegra que hayas encontrado la solución.