Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Crear barra de desplazamiento (overflow) horizontal en div (gráfico)

CSS - Crear barra de desplazamiento (overflow) horizontal en div (gráfico)

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de txema
Val: 39
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Crear barra de desplazamiento (overflow) horizontal en div (gráfico)

Publicado por txema (17 intervenciones) el 22/12/2017 03:25:10
Hola chicos.

A veces lo aparentemente más sencillo termina por complicarnos el día ... y la semana.

El tema es el siguiente: al adaptar varios proyectos web desde escritorio hasta smartphones, aparece la imposibilidad de hacer funcionar el overflow en un gráfico creado con API ColumnChart de visualización sobre el perfil de elevación de una ruta dada en Google Maps.

Si bien el proyecto es más complejo, pueden ver una muestra de dicho gráfico en ...examples/full/elevation-paths.... El código completo lo tienen en .../documentation/javascript/examples/elevation-paths?hl=es-419

En mi caso concreto, el gráfico tiene unas dimensiones width: 800px; height: 180px,. Dado que las mismas son creadas desde el API (chart.draw), definidas en CSS, y me interesa mantenerlas incluso en dispositivos de pantalla reducida (al comprimir el gráfico exageramos las diferencias del perfil de altitudes) la solución pasa por crear una barra de desplazamiento horizontal solamente del gráfico mencionado.

La solución más fácil y que dentro de divs de texto funciona, es (CSS) overflow:auto.;
He pasado a probar sin resultado
1
2
3
4
overflow:auto;
 overflow: scroll;
overflow-y:hidden;
overflow-x: scroll;  //  hidden;

Finalmente he probado por ::-webkit-scroll y dándole estilos. En mi caso:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#grafico_elevacion {

  display: block;
  padding: 8px;
  opacity: 1.0;
  position: relative;
  float: left;
  z-index: 100;
  background-color: transparent;
}
#grafico_elevacion::-webkit-scroll {

  width: 800px;
  height: 180px;
  overflow-y:hidden;
  overflow-x: scroll;
}
#grafico_elevacion::-webkit-scrollbar-track {

  background:#FBFBFB;

  box-shadow: 3px 3px 10px rgba(0,0,0,.25) inset;
}
#grafico_elevacion::-webkit-scrollbar-thumb {

  background: #84C4FF;

  border-radius: 10px;
  border:1px solid rgba(0,0,0,0.3);
  box-shadow: -3px -3px 6px rgba(66,137,224,1) inset,3px 3px 3px rgba(158,226,225,1) inset;
}

El objetivo de crear la barra de desplazamiento horizontal no funciona. ????

¿Alguna nueva idea?

Saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Lopez
Val: 160
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Crear barra de desplazamiento (overflow) horizontal en div (gráfico)

Publicado por Lopez (38 intervenciones) el 29/12/2017 15:52:46
Hola txema,

Es bastante simple la verdad.
Te dejo un demo donde minifique el código así te sea fácil leer y no te compliques con tantas capas.
https://codepen.io/lowpez/pen/dJWodJ

Cuéntanos que tal te fue,
Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de txema
Val: 39
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Crear barra de desplazamiento (overflow) horizontal en div (gráfico)

Publicado por txema (17 intervenciones) el 29/12/2017 20:19:38
Hola López:

Gracias por tu aporte. Pero ... como exponía, el gráfico creado en Javascript con API ColumnChart destroza mi CSS.

Con tu código aparece la barra de desplazamiento horizontal (ya lo experimenté antes) pero no funciona.

Como me decía un amigo, "Google nos pide diseños responsivos y a la vez crea estos engorros"

Opté por la menos mala de las soluciones:
El gráfico está generado en Javascript y, con otros elementos intervinientes de la ruta de google maps, se definían:
1
2
3
4
5
6
7
8
9
chart.draw(data, {
  height: 180,
  width: 800,
  colors: ['#D23C5A', '#A83048'],
  backgroundColor: '#A0A0A0',
  legend: 'none',
  titleY: 'Altitud (m)',
  titleX: 'Distancia ' + dist + ' kms.'
});

Lo que sí me permitiió el código para hacerlo responsive es tomar el ancho de la pantlla (bravo $(document).width();):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var width = $(document).width();
if (width > 980) {
  width = 940;
} else {
  width = width - 20;
}
chart.draw(data, {
  height: 180,
  width: width,
  colors: ['#D23C5A', '#A83048'],
  backgroundColor: '#A0A0A0',
  legend: 'none',
  titleY: 'Altitud (m)',
  titleX: 'Distancia ' + dist + ' kms.'
});
(los márgenes están compensados con valores negativos porque no me admite ni padding mi margin)

Claro está que al comprimir un gráfico de altitudes, comprimimos los desniveles . Mi intención de overflow quedó aparcada.

Gracias nuevamente y feliz 2018.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 39
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Crear barra de desplazamiento (overflow) horizontal en div (gráfico)

Publicado por txema (17 intervenciones) el 29/12/2017 23:42:35
Por complementar la razón de mi problema:

Diseño de la página para escritorio:
img1

Diseño de la página con el gráfico porcentual y tratando de forzar el overflow-x
img2
el desplazamiento aparece en el navegador, no en la página)

Con tu código (ya experimentado con un div contenedor y otro interno, dentro de él, para el gráfico)
img4
(Aparece la barra de desplazamiento pero no permite desplazarse)

Mi mejor solución pero como ves, el gráfico se comprime
img5


Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 39
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Crear barra de desplazamiento (overflow) horizontal en div (gráfico)

Publicado por txema (17 intervenciones) el 30/12/2017 05:33:09
Al final, la solución mágica:
envolver mi gráfico de elevación entre divs como las capas de una cebolla:

HTML:
1
2
3
4
5
<div class="wrapper">
  <div class="scroller">
    <div id="grafico_elevacion" onmouseout="clearMouseMarker()"></div>
  </div>
</div>

y CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.wrapper {
    background:#EFEFEF; 

    box-shadow: 1px 1px 10px #999; 

    margin: auto;
    text-align: center;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 20px !important;
    width: 96%;
    padding-top: 5px;
}
.scroller{
    overflow-x: scroll;
    overflow-y: hidden;
    height: 180px;
    white-space:nowrap;
}
(el ancho de .wrapper porcentual para hacerlo responsive)
Y me olvido del <div id="grafico_elevacion"> generado en javascript

Resultado:
img6

Gracias, lópez
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar