CODEWITHSUNDEEP
datatablehtml-tablewidthyui
Abe
Abe

Reputation: 6516

YUI Datatable Width

This may seem like a basic question, but I'm having trouble figuring out how to set the table width to 100% on a YUI datatable.

I tried doing

#dtContainer {
    width: 100%;
}

#dtContainer table {
    width: 100%
}

but none of these approaches work.

To clarify, I am trying to set the datatable width to 100% when the table is empty and the empty message is displayed.

The generated table is an HTML table; so, I thought this should work.

Upvotes: 4

Views: 6043

Answers (6)

Shmulinson
Shmulinson

Reputation: 421

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

This should do the trick. Worked for me AUI 2.5.1

Upvotes: 0

Kwex
Kwex

Reputation: 4020

To maintain aspect ratio across various screens with different resolutions, I had to manually set the column width as percentages that summed up to 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: Might not be the best way to do this, but it solved my problem!

Kwex.

Upvotes: 0

Matt Calderaro
Matt Calderaro

Reputation: 61

Dont use .yui-dt table { width:100%;} , It doesn't appear to set the column widths correctly. Use myDataTable.setAttributes({width:"100%"},true); after table render

Upvotes: 6

Singularity
Singularity

Reputation: 1

looks like this little style tag works magic:

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

Upvotes: 0

Abe
Abe

Reputation: 6516

It turns out the solution is really simple:

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

Upvotes: 4

Singularity
Singularity

Reputation: 1

this is an ugly solution. but it works

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

the problem is applying the style pre render is pointless, the javascript is building the table, post render is all I could get to work.

Upvotes: 1

Related Questions