How to make YUI DataTable to be 100% width

Question

My code for creating the data table looks like this:

myDataTable = new YAHOO.widget.ScrollingDataTable(
                    "containerDiv",
                    myColumnDefs,
                    myDataSource,
                    {height:"100px",width:"100%"}
                  );

That code produces a table that looks something like this: (Screen shot not available anymore from external site) http://drop.io/download/public/gfipf7axm6ydjsvuaiaf/296829ffb3ad115ecf1d9e13a607eaf2e2dc2788/Asset/37984293/v3/large_thumbnail

Notice how it creates an outer box stretching 100% just like I want it to, but the table itself does not stretch all the way 100%, instead it is only large enough to fit the contents of the table.

Please note that the outer box that stretches 100% is created by YUI when you run the above code, I didn't create that myself.

What I really need is just vertical scrolling and no horizontal scrolling. But YUI does not let you specify one or the other, you get both.

Is there a way to make the table stretch 100%? I didn't find anything about this issue in the YUI documentation, unless I have overlooked it.

Thanks for reading!

Answer 1

When you use a ScrollingDataTable and specify a width, the columns are not auto-sized. This makes sense when you think about it - the table must handle cases where there are too many columns to fit in the view, so it doesn't attempt to fit them.

Since it looks like you don't need horizontal scrolling, remove the width config attribute. To get the table to your desired width, you can try:

• Specifying the width in css on the container div, rather than in the table config
• Specifying column widths so they add up to the total width that you want.