windows-8 - 灰色のボックスを追加するGroupInfoによるWinJS ListViewの柔軟なアイテムの高さ

Question

高さの異なるアイテムを含む ListView コントロールを表示しています。アイテムの高さは、ヘッダー テキスト要素によって異なります。GridLayout の groupInfo プロパティについて読みました。これは、アイテムのサイズを大きくするという点で魅力的です。アイテムが最も近いセル範囲に収まるように、セルの高さをかなり小さく設定しました。

簡単に言えば、リストの最後に常に特定のアイテムを追加する必要がありました。これを行うには、項目を手動でポップし、新しいデータを挿入し、項目をリストの最後に追加します。これは機能します。私のレンダリング機能はアイテムを認識し、アイテム自体を正しくレンダリングします (残りのアイテムとは異なる css クラスを持っています) が、常に次の列にこれらの灰色のボックスを追加します。これらのボックスのサイズは、groupInfo の cellwidth/cellheight のサイズに対応します。

なぜこれが表示されるのでしょうか？

Answer 1

それで、これをタイプしたのと同じように、これらを取り除く方法を見つけました。なぜ彼らが現れるのか、いまだに理解できません。最後に追加していたアイテムに使用していたcssを見てみました。私はそれにパディングを設定していました。パディングを削除すると、灰色のボックスが表示されなくなりました。

レンダリングされたhtmlを次から変更しました：

<div class='item extraclasswithpadding'>
   Content
</div>

に：

<div class='item'>
   <div class='extraclasswithpadding'>
      Content
   </div>
</div>

そして今、すべてが素晴らしく見えます。ListView への正確な回答がこれを行うわけではありませんが、確実な回避策です。