YUI Scrolling DataTable width problem

I should say, this is weirdest issue I solved lately. We were using YUI Scrolling DataTable to show huge amount of stat information. It’s not the data part that did trouble us, but scroll bars. We started seeing scrollbars every where, even at pages where we had single table with small four columns. Each column was occupied with the space 200% of the given available space. I am sorry that I doubted on YUI ScrollingDataTable widget, but nothing came out after 6 hours of digging logging etc, finally figured out “all is well” with the widget, it’s the problem with the way HTML table rendering inside the widget. Some I got doubt about the CSS associated with the tables, for some reason previous developers assigned

table{
width:100%
}

in CSS. and I made it

table{
width:auto;
}

Guess what? UI Fixed.

Actually this is what happened, all these tables were under floated column divs, with width:100%, tables  occupied space bigger than their containers, since widget tried to size DataTable to actual width of the content and because of CSS property, actual content took more space than needed, we were getting DataTables with huge white space and scrollbars.

Moral of the story is:  If you are using YUI DataTable widget, never use global table selector with width:100%.

Happy Coding.

Skinning YUI Data Table

we do generally think skinning any css thing is very easy, I started skinning YUI data table with the same assumption, but what turned out is my assumption was wrong, it needed bit more that css sense, that is cascading sense. the better understanding of data table. Finally I am done with that, here is the css for skinning your data table to purple color. append it to your skin.css (inside /assets/skin/sam/ folder)

.yui-skin-sam tr.yui-dt-odd {background-color:#f1edff;}
.yui-skin-sam tr.yui-dt-odd td.yui-dt-asc{background-color:#e5dbff;}
.yui-skin-sam tr.yui-dt-even td.yui-dt-asc{background-color:#f1edff;}
.yui-skin-sam tr.yui-dt-highlighted{background-color:#c6b2ff;}
.yui-skin-sam tr.yui-dt-highlighted td, .yui-skin-sam tr.yui-dt-highlighted td.yui-dt-asc, .yui-skin-sam tr.yui-dt-highlighted td.yui-dt-desc{background-color:#c6b2ff;}
.yui-skin-sam tr.yui-dt-selected{background-color:#7c42d9;}
.yui-skin-sam tr.yui-dt-selected td, .yui-skin-sam tr.yui-dt-selected td.yui-dt-asc, .yui-skin-sam tr.yui-dt-selected td.yui-dt-desc {background-color:#7c42d9;}

make sure you won’t mess with the order, order is more important than the content.

check out preview image @ http://www.flickr.com/photos/ananthara/4202372041/