WinJS ListView flexible item height via GroupInfo appending gray boxes - windows-8

Question

I am showing a ListView control with items of varying height. The items' height varies depending on a header text element. I read about the GridLayout's groupInfo property, which works like a charm in terms of sizing up the items. I set the height of the cell to be rather small so that my items can be fit into the closest cell span.
Long story short, I needed to add always have a particular item at the end of the list. I do this by manually popping the item, inserting new data, adding the item to the back of the list. This works. My rendering function recognizes the item and renders the item itself correctly (it has different css classes from the rest of the items), but it always adds these gray boxes in the next column. The size of these boxes corresponds to the size of the groupInfo cellwidth/cellheight.
Why would this be showing up?

Answer 1

So just as I typed this up I figured out a way to get rid of these. Still don't understand why they would show up. I looked at the css I was using for the item I was appending at the end. I was setting a padding on it. When I removed the padding, the gray boxes no longer showed up.
I changed the rendered html from:
<div class='item extraclasswithpadding'>
Content
</div>
to:
<div class='item'>
<div class='extraclasswithpadding'>
Content
</div>
</div>
and everything is looking great now. Not exactly an answer to the ListView would do this, but certainly a solid workaround.