locked
html/javascript listview question sizing RRS feed

  • Question

  • How do I create a listView control that takes up the full page - landscape or portrait

    I'm following the sample listView example.

    I see that one can set the dimensions for the listview in the css file. i suppose i can set the width to 100%

    But then how do I set the dimensions for the listitem - i'm using list layout (vertical display).

    I just want a list where items are displayed in a vertical list (not grid) and each listitem takes up the

    full width of the display - height is fixed.

    • Changed type Jamles Hez Wednesday, September 17, 2014 6:40 AM
    Wednesday, September 17, 2014 12:08 AM

Answers

  • Please take a look at the following line:

    There are two ways to style items in your ListView. You can apply styles to the item template, or you can override the win-container class. There's one thing that you must always do in your template, and that's set the size of your items. If you don't set the size of your items, you might not get the layout you want.

    If you want to resize your item, please control them in the template instead of setting in CSS.

    --James 


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by Jamles Hez Sunday, September 28, 2014 8:05 AM
    Thursday, September 18, 2014 1:03 AM
  • Then give a try to set the template CSS width as 100% instead of setting for .win-listview

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by Jamles Hez Sunday, September 28, 2014 8:06 AM
    Friday, September 19, 2014 8:34 AM
  • After much experimentation.

    Looks like setting the listview width to auto and the

    list-item width to 100% does what i needed.

    Again - this is list-layout - not grid-layout.

    Thanks.

    • Marked as answer by Jamles Hez Sunday, September 28, 2014 8:06 AM
    Friday, September 19, 2014 6:54 PM

All replies

  • Hi snowlion9,

    Please ref to the documentation: Styling items and groups and Defining an item template.

    You can either styling the css for item or re-style the listview datatemplate.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, September 17, 2014 6:43 AM
  • Yes I read those pages - it doesn't answer the question that I have.

    After I set the list-view width to 100% - how do I get the list-item

    to take up the full remaining width.

    Also I noticed the styling

    #myListView .win-listview {}

    That doesn't work with a space between the two

    #myListView.win-listview {} works.

    Wednesday, September 17, 2014 12:20 PM
  • Please take a look at the following line:

    There are two ways to style items in your ListView. You can apply styles to the item template, or you can override the win-container class. There's one thing that you must always do in your template, and that's set the size of your items. If you don't set the size of your items, you might not get the layout you want.

    If you want to resize your item, please control them in the template instead of setting in CSS.

    --James 


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by Jamles Hez Sunday, September 28, 2014 8:05 AM
    Thursday, September 18, 2014 1:03 AM
  • Thanks for the response and I understand.'

    The issue is that I don't want to hard-code the width (nor do I know the width of the item).

    I just want a listview (vertical not grid) and want the item to take up the full width - w/o hardcoding a pixel number.

    Essentially - I would like to add a "stretch" or in Android terms - fill_parent.

    I've set the width of the parent listview to 100%, created a border and a margin.

    Now I want the list-items to take up the remaining width and align them vertically.

    Relatively standard - i think.

    Thursday, September 18, 2014 1:45 PM
  • Then give a try to set the template CSS width as 100% instead of setting for .win-listview

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by Jamles Hez Sunday, September 28, 2014 8:06 AM
    Friday, September 19, 2014 8:34 AM
  • After much experimentation.

    Looks like setting the listview width to auto and the

    list-item width to 100% does what i needed.

    Again - this is list-layout - not grid-layout.

    Thanks.

    • Marked as answer by Jamles Hez Sunday, September 28, 2014 8:06 AM
    Friday, September 19, 2014 6:54 PM