locked
How to change position of group header of a listview from top to left of each group?

    Question

  • Due to space constraints of my screen, I need to change the default (top) position group headers to the immediate left of each group preferably in a vertical format written one letter at a time.
    This will essentially eliminate one extra line on top of my listview and gives it a cosmetically refined look.
    Is there a way to accomplish this with CSS? Appreciate any help.

    Saturday, April 19, 2014 9:23 PM

Answers

  • Well, good question, I can just delivery kind of a hack solution right now, since there is no directly property support it.

    Basically I modify the layout by following CSS code:

    .win-groupheadercontainer
    {
        ;
        top:100px;
    }
    
    .win-container
    {
        ;
        left:50px;
    }

    the result :

    Hope helps.

    --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 AlanSanford Thursday, April 24, 2014 6:50 PM
    Thursday, April 24, 2014 10:04 AM
    Moderator

All replies

  • Hi Alan,

    Try to override win-group CSS class. As what I did, I modify the group header background, you could also replace it by 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.

    Monday, April 21, 2014 2:42 AM
    Moderator
  • Thanks James but I still don't see how I can get my group header to move to the left and span vertically like the picture below. Do I need to modify the default ListView grid format? Could you give me a heads up on what CSS command to use?

    header position and format

    Tuesday, April 22, 2014 9:44 AM
  • Well, good question, I can just delivery kind of a hack solution right now, since there is no directly property support it.

    Basically I modify the layout by following CSS code:

    .win-groupheadercontainer
    {
        ;
        top:100px;
    }
    
    .win-container
    {
        ;
        left:50px;
    }

    the result :

    Hope helps.

    --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 AlanSanford Thursday, April 24, 2014 6:50 PM
    Thursday, April 24, 2014 10:04 AM
    Moderator
  • Thank you very much for your help James. Worked like a charm.

    Thursday, April 24, 2014 6:50 PM