Grid layout realligning when a grid items's width change


  • Hi,

    I have a grid layout of columns which has 3 grid items and each has width set to auto. Now in my middle Grid item, which is a list view, a user can add items. So initially if this Grid Item have one column, after rendering it can increase.

    -ms-grid-columns: auto auto auto
    Problem I am facing is once the column span of Grid item is increased it comes with a scroll bar. It is not re-flowing. (Initially its a single column list, but on adding items to the list it can become a 2 column list) But if I select an item in the list (right clicking on an item), it re-flows and scroll bar is gone.

    Another problem is sometimes the first Grid Item has a delayed load because of slowness of the data fetch operation. When this happens the 1st Grid Item also appears with a scroll bar.

    Is there a way I can trigger reflow/realign of the grid on my own?

    Thanks in advance.

    Friday, September 21, 2012 7:28 AM


All replies

  • Hi,

    How about

    -ms-grid-columns: 1fr 1fr 1fr

    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    • Proposed as answer by Song Tian Friday, September 28, 2012 5:58 AM
    • Marked as answer by Dino He Thursday, October 11, 2012 2:16 PM
    Wednesday, September 26, 2012 8:40 AM
  • Hi,

    Sorry for the late reply. I didn't get a chance to try your solution, but I fixed it by setting width of the container manually in javascript.

    Sunday, October 14, 2012 5:28 PM