locked
[U8.1][HTML]LIstview Items styling

    Question

  • I am trying to create a WinJS.UI.ListView object as described in the MSDN site using WinJS.UI.ListLayout.I am using renderer function to bind template and giving different style for each item being added.I want to show the elements in listview as shown in the attached image.Float left is not working to align to items of the listview in same line.I would be great if some one could suggest how to style the elements  


     


    • Edited by Meera Shenoy Monday, May 4, 2015 7:03 PM
    • Edited by Jamles HezModerator Tuesday, May 5, 2015 5:24 AM add title tag per https://social.msdn.microsoft.com/Forums/windowsapps/en-US/b479e984-ca39-4b34-a6b7-85194b54d8bd/guide-to-posting-subject-line-tags?forum=wpdevelop
    Monday, May 4, 2015 7:00 PM

Answers

  • Looks like it is not possible. See the remark section of the ListLayout object. 

    Groups and  cell-spanning are not supported when using a ListLayout. For more info about cell-spanning, see How to display items that are different sizes.

    That's why we can only do it horizontally.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, May 19, 2015 9:13 AM
    Moderator
  • Hi Meera,

    You should be able to find more details from: Using  ListView, that is the only way we can do in WinJS.

    Cell-spanning view

    When you set the ListView control's layout property to use a GridLayout,  it can use the cell-spanning feature to display items of different sizes in the same list. Cell-spanned  items must be integer multiples of the base size. For example, if the base size is 100 by 100 pixels, larger items might be 200 by 200 pixels, but not 150 by 200 pixels.  

    The ListView determines the size of an item using:

    • The itemInfo function, if it was supplied.
    • Otherwise, the size of the element returned by the rendering function.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, May 19, 2015 7:05 AM
    Moderator

All replies

  • Hi Meera,

    Could you describe more for your current issue, as I can only see there is a small picture with a red line also some blue boxes, is that mean you want to have two items in the same line while using ListView?

    Not sure if I get what you want, simply provide some material for you if helps: Style the ListView and its items

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, May 5, 2015 5:24 AM
    Moderator
  • Hi Jamles,

    I want the first list Item to have full width,second and third should be in same line fourth one taking fullwidth and this pattern repeats .I tried float left  with width 50% for the second and third Items but its not working and it aligns one under the other one and its right space remains blank.I can't write a common for  style  .win-container since the items are having different styles


    Tuesday, May 5, 2015 5:33 AM
  • Hi Meera,

    You should be able to find more details from: Using  ListView, that is the only way we can do in WinJS.

    Cell-spanning view

    When you set the ListView control's layout property to use a GridLayout,  it can use the cell-spanning feature to display items of different sizes in the same list. Cell-spanned  items must be integer multiples of the base size. For example, if the base size is 100 by 100 pixels, larger items might be 200 by 200 pixels, but not 150 by 200 pixels.  

    The ListView determines the size of an item using:

    • The itemInfo function, if it was supplied.
    • Otherwise, the size of the element returned by the rendering function.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, May 19, 2015 7:05 AM
    Moderator
  • Hi Jamles,

    In the documentation its given that ,in grid layout 'itemInfo property is no longer supported. Starting with the Windows Library for JavaScript 2.0, use a CellSpanningLayout.' and in CellSpanningLayout orientation vertical is not supported.

    Tuesday, May 19, 2015 7:13 AM
  • Oops, looks like the documentation does not update timely. Perhaps you want to feedback to us: https://wpdev.uservoice.com/forums/110707

    However you could still find ItemInfo from the CellSpanningLayout.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, May 19, 2015 7:21 AM
    Moderator
  • Hi

    But we can use CellSpanning only horizontally it doesn't support vertical Listview .Here i need to style the vertical Listview

    Tuesday, May 19, 2015 7:26 AM
  • Looks like it is not possible. See the remark section of the ListLayout object. 

    Groups and  cell-spanning are not supported when using a ListLayout. For more info about cell-spanning, see How to display items that are different sizes.

    That's why we can only do it horizontally.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, May 19, 2015 9:13 AM
    Moderator