locked
Removing the Gap Between the Items in a List View

    Question

  • Hello there

    Is it possible to remove the spacing between items in a listview?

    I have an HTML5\JavaScript application with a databound list view (WinJS.UI.ListView of type WinJS.UI.Gridlayout).  I have tried all the styling I can think of on the divs (margins and paddings etc.).

    Wednesday, February 5, 2014 10:36 PM

Answers

  • Hi Geoff,

    Have you tried directly uncheck these two item while debugging the app?

    If the result is what you need, override the CSS might be better than change the source of Microsoft WinJS CSS style. Take a look at : http://stackoverflow.com/questions/13117126/how-to-overwrite-css-style

    --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 Geoff_Olding Sunday, February 9, 2014 7:33 PM
    Friday, February 7, 2014 8:04 AM
    Moderator

All replies

  • Hi Geoff

    Yes, basically you need to modify the CSS of the ListView.

    Modify the following CSS should be fine.

    --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.

    Thursday, February 6, 2014 1:39 AM
    Moderator
  • Thanks for your reply

    I have made these changes in the .css I am referencing (c:\program files\Microsoft SDKs\Windows\v8.1\ExtensionSDKs\Microsoft.WinJS.2.0\1.0\DesignTime\CommonConfiguiration\Neutral\Microsoft.WinJS.2.0\css\ui-klight.css).

    This has no effect

    Thursday, February 6, 2014 9:08 PM
  • Hi Geoff,

    Have you tried directly uncheck these two item while debugging the app?

    If the result is what you need, override the CSS might be better than change the source of Microsoft WinJS CSS style. Take a look at : http://stackoverflow.com/questions/13117126/how-to-overwrite-css-style

    --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 Geoff_Olding Sunday, February 9, 2014 7:33 PM
    Friday, February 7, 2014 8:04 AM
    Moderator
  • Many thanks for your help.

    Overriding the styles in my own css did the trick.

    For the record, in the end I decided that a one margin gap looked better, and added the following to the top of my CSS:

    .win-listview > .win-horizontal .win-container {

        margin: 1px 1px 1px 1px;

    }

    .win-horizontal .win-gridlayout .win-container {

        margin: 1px;

    }

    Sunday, February 9, 2014 7:32 PM