YUI Datatable Width

Questa può sembrare una domanda di base, ma ho difficoltà a capire come impostare la larghezza della tabella al 100% su un datatable YUI.YUI Datatable Width

Ho provato a fare

#dtContainer { 
    width: 100%; 
} 

#dtContainer table { 
    width: 100% 
}

ma nessuno di questi approcci funzionano.

Per chiarire, sto cercando di impostare la larghezza datatable al 100% quando la tabella è vuota e viene visualizzato il messaggio vuoto.

La tabella generata è una tabella HTML; così, ho pensato che questo dovrebbe funzionare.

fonte

2009-10-16 Abe

Si scopre la soluzione è molto semplice:

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

fonte

2009-12-22 02:42:38 Abe

Mi dispiace, ho dimenticato di dire che non ho usato questa soluzione ... – Abe

In questo caso dovresti selezionare la risposta di Matt Calderaro come risposta corretta, non la tua risposta che non hai usato. – Paul

questa è una brutta soluzione. ma funziona

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

il problema sta applicando lo stile pre render è inutile, il javascript è la costruzione del tavolo, dopo il rendering è tutto quello che potevo andare al lavoro.

fonte

2009-11-12 22:23:11 Singularity

Grazie. Non ho usato la tua implementazione, ma mi ha indirizzato nella giusta direzione. Fondamentalmente ho utilizzato il metodo YUI Dom setAttribute per impostare la dimensione sui metodi che attivano l'evento render() sul datatable YUI. – Abe

assomiglia a questo tag stile piccole opere di magia:

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

fonte

2010-01-12 21:12:23 Singularity

Non utilizzare .yui-dt table {width: 100%;} , Non sembra impostare le larghezze della colonna correttamente. Usa myDataTable.setAttributes ({width: "100%"}, true); rendering post tabella

fonte

2010-10-28 14:42:14

Sì. questo è quello che ho fatto nell'evento di rendering. Grazie! – Abe

ha funzionato per me. ha aggiunto anche quanto segue su postRender in modo che l'intestazione e il corpo si trovino a destra: $ ("div.yui-dt-hd"). css ('width', 'auto'); $ ("div.yui-dt-bd"). Css ('width', 'auto'); – capdragon

Se non funziona, usare 'setAttrs' invece di' setAttributes' (YUI3). – JGeo

Per mantenere le proporzioni tra i vari schermi con risoluzioni diverse, ho dovuto impostare manualmente la larghezza della colonna come percentuali che si sommano al 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>

PS: Potrebbe non essere il modo migliore per farlo, ma ha risolto il mio problema!

Kwex.

fonte

2011-09-19 13:52:21 Kwex

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

Questo dovrebbe fare il trucco. Ha funzionato per me AUI 2.5.1

fonte

2015-02-09 14:40:34 Shmulinson

risposta

Problemi correlati