YUI Datatable Ancho

Esto puede parecer una pregunta básica, pero estoy teniendo problemas para averiguar cómo ajustar el ancho de la tabla al 100% en una tabla de datos YUI.YUI Datatable Ancho

He intentado hacer

#dtContainer { 
    width: 100%; 
} 

#dtContainer table { 
    width: 100% 
}

pero ninguno de estos enfoques de trabajo.

Para aclarar, que estoy tratando de establecer el ancho de tabla de datos al 100% cuando la tabla está vacía y se muestra el mensaje vacío.

La tabla generada es una tabla HTML; entonces, pensé que esto debería funcionar

Fuente

2009-10-16 Abe

Resulta que la solución es muy simple:

.yui-dt table 
{ 
    width: 100%; 
}

Fuente

2009-12-22 02:42:38 Abe

Lo siento, olvidé mencionar que no utilicé esta solución ... – Abe

En ese caso, debe seleccionar la respuesta de Matt Calderaro como la respuesta correcta, no su propia respuesta que no usó. – Paul

esta es una solución feo. pero funciona

<script> 
window.onload = function() { 
setTimeout('document.getElementById("NAME OF CONTAINER DIV").childNodes[1].style.width 
= "100%"',1000); 
}; 
</script>

el problema es aplicar el estilo pre render no tiene sentido, el Javascript es la construcción de la tabla, después se hacen todo lo que podía llegar a trabajar.

Fuente

2009-11-12 22:23:11 Singularity

Gracias. No usé tu implementación, pero sí me apuntó en la dirección correcta. Básicamente utilicé el método YUI Dom setAttribute para establecer el tamaño de los métodos que desencadenan el evento render() en la tabla de datos YUI. – Abe

se parece a esto etiqueta de estilo poco hace magia:

.yui-dt table { width:100%;}

Fuente

2010-01-12 21:12:23 Singularity

no uso .yui-dt tabla {width: 100%;} , No parece establecer los anchos de columna correctamente. Use myDataTable.setAttributes ({width: "100%"}, verdadero); después de mesa rinden

Fuente

2010-10-28 14:42:14

Sí. eso es lo que hice en el evento render. ¡Gracias! – Abe

funcionó para mí. también agregó lo siguiente en postRender para que el encabezado y el cuerpo se iluminen a la derecha: $ ("div.yui-dt-hd"). css ('ancho', 'auto'); $ ("div.yui-dt-bd"). Css ('ancho', 'auto'); – capdragon

Si no funciona, use 'setAttrs' en lugar de' setAttributes' (YUI3). – JGeo

Para mantener la relación de aspecto a través de varias pantallas con diferentes resoluciones, tenía que ajustar manualmente el ancho de la columna como porcentajes que se suman para 100%.

<style type="text/css"> 

    /* YUI Individual Column Width */   
    #dvAutoWidthList .yui-dt-col-Col1{width: 35%;} 
    #dvAutoWidthList .yui-dt-col-Col2{width: 10%;} 
    #dvAutoWidthList .yui-dt-col-Col3{width: 15%;} 
    #dvAutoWidthList .yui-dt-col-Col4, .yui-dt-col-Col5, .yui-dt-col-Col6, .yui-dt-col-Col7 {width: 10%;} 

</style>

PD: Puede que no sea la mejor manera de hacerlo, pero ¡resolvió mi problema!

Kwex.

Fuente

2011-09-19 13:52:21 Kwex

var dataTable = new Y.DataTable(
      { 
      columns: cols, 
      data: remoteData, 
      width: '100%',    
      } 
     ).render('#dataTable ');

Esto debería hacer el truco. Trabajó para mí AUI 2.5.1

Fuente

2015-02-09 14:40:34 Shmulinson

YUI Datatable Ancho

Respuesta

Cuestiones relacionadas