Crear barra de desplazamiento (overflow) horizontal en div (gráfico)[No resuelta]

Respuestas:

•  

    1  

   

   

  Fernando García Karma: 405

   
  Fecha: 21-12-2017 18:48:22 Hola Txema, aunque no he probado esta api, supongo que en un iframe te debería funcionar, y en un object también, lo has probado?
  
  Aunque los object no se llevan bien con los móviles, creo recordar, mejor usa un iframe.
  
  Me pasó algo parecido con recaptcha y lo solucioné con dos divs contenedores: el externo block, que en tu caso debería ser con overflow:auto, y el interno inline-block sin overflow donde metes todo el código de la api. También puedes usar !important si sirve de algo.
  
  Google nos pide diseños responsivos y a la vez crea estos engorros.
  
  Ya nos dices.   Votos: 1 - Link respuesta
   
•  

    0  

   

   

  Txema Artzain Karma: 3096

   
  Fecha: 22-12-2017 02:47:34 Gracias Fernando.
  
  La inclusión de mi div #grafico_elevacion dentro de un div contenedor ya lo había probado sin resultado (ni con tus recomendaciones). Está claro que los estilos generados desde chart.draw anulan los que podemos tener en el CSS e incluso con los estilos en línea (important! incluido).
  
  Trabajarlo dentro de un iframe u object resulta algo más complejo ya que el gráfico se genera dentro de una función donde una ruta dada genera una polilínea que la graficamos y tiene otros elementos propios de Google Map como marcadores, ventanas de información y aspectos particularizados de una ruta que es generada por cada usuario.
  
  El trozo de código donde se genera el ancho del gráfico es este:
  

      chart.draw(data, {
        height: 180,
        width: 800,
        colors: ['#D23C5A', '#A83048'],
        backgroundColor: '#A0A0A0',
        legend: 'none',
        titleY: 'Altitud (m)',
        titleX: 'Distancia ' + dist + ' kms.'
      });	

  
  pero los valores numéricos los traduce a píxeles y no admite valores porcentuales ni overflow: 'auto' como cabría esperar
  
  Así que, como mejor solución, que al menos se ajusta al documento ($(document).width) ha sido esta (los valores de resta corresponden a los padding que tampoco los respeta) :
  

  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.'
      });

  
  
  No obstante, si alguien tiene una solución para el overflow horizontal, sigue siendo de todo mi interés.
  
  Saludos.   Votos: 0 - Link respuesta
   
•  

    0  

   

   

  Fernando García Karma: 405

   
  Fecha: 22-12-2017 03:33:42 Hola Txema, si el método te permite especificar el ancho es una buena solución a mi entender.
  
  Has probado con dos divs contenedores como te he dicho?   Votos: 0 - Link respuesta
   
•  

    0  

   

   

  Txema Artzain Karma: 3096

   
  Fecha: 22-12-2017 04:15:33 Si. Lo decía en el primer párrafo:
  

  <div id="elevacion"></div>
    <div id="grafico_elevacion"></div>
  </div>

  
  y aplicar el overflow al div contenedor.
  
  Pero como te decía, desde el Javascript los estilos generados del API ColumnChart por chart.draw anulan los que podemos tener en el CSS e incluso con los estilos en línea (important! incluido).
  
  Al crear una variable var width = $(document).width(); dentro de la función y tomar el ancho del documento como parámetro es por ahora la menos mala de las soluciones.
  Ahora vengo a tenerlo como width: 98%; margin: 0 auto;
  
  Gracias de igual modo.   Votos: 0 - Link respuesta
   
•  

    0  

   

   

  Txema Artzain Karma: 3096

   
  Fecha: 29-12-2017 13:15:14 Hola Fernando:
  
  Para que tengas una visualización del problema y con la "mejor" solución adoptada, puedes ver las imágenes de la página en https://www.lawebdelprogramador.com/foros/CSS/1636496-Crear-barra-de-desplazamiento-overflow-horizontal-en-div-grafico.html#i1637131
  
  Saludos y que venga un excelente el 2018 para todos.   Votos: 0 - Link respuesta
   
•  

    0  

   

   

  Fernando García Karma: 405

   
  Fecha: 30-12-2017 01:03:45 Hola Txema,
  
  Ok, al final parece que lo has conseguido con dos contenedores.
  
  Supongo que javascript sobreescribe otros estilos porque son los últimos que se generan al generarse dinámicamente, y por tanto prevalecen sobre cualquier otro. Pero yo me refería a contenedores que la api no puede modificar, no al div #grafico_elevacion.
  
  Salu2 y feliz año.   Votos: 0 - Link respuesta
   
•  

    0  

   

   

  Marketinable Marketing Karma: 1

   
  Fecha: 21-09-2018 11:48:18 <div style="overflow:auto;" >
  :::
  </div>
  asi me funciono, Gracias por la idea   Votos: 0 - Link respuesta