locked
Listview group background and border RRS feed

  • Question

  • How do I put a border and background color around the group in a listview...  I only have a access to the header template, so if I put a border around that it only puts around the header.  I want the border around the header and elements, so I can make them look like they are inside a box/tile...

    Is that possible?


    www.emadibrahim.com

    Saturday, June 2, 2012 5:39 AM

All replies

  • You can trace down the styles using the DOM explorer in Visual Studio and override them.  Choose DOM Explorer and then select element... Click on the element in the UI (for single monitor systems you can use the simulator) and then choose 'trace styles'

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, June 5, 2012 12:01 PM
    Moderator
  • I tried but the entire listview is rendered as seperate (not nested) divs...  so instead of

    <div class=group>

      <div class=item/>

      <div class=item/>

      <div class=item/>

    </div>

    It renders like this

      <div class=group/>

      <div class=item/>

      <div class=item/>

      <div class=item/>

    so there is really nothing that surrounds the entire group for me to style...  Any ideas?


    www.emadibrahim.com

    Tuesday, June 5, 2012 12:58 PM
  • You could then place the view in a div and apply the border to the div!

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, June 5, 2012 6:21 PM
    Moderator
  • I am not sure that will work... I will take a look and get back to you...

    The problem is where do I put that div?  If I put it in the group template, it only wraps the group.  if I put it in the task template, it wraps the task only.  If I put it around the listview, it wrap the entire list...  Any suggestions or examples?

    Thanks again.


    www.emadibrahim.com

    Wednesday, June 6, 2012 2:35 PM
  • Oh goodness... Sorry I missed the fact that it was just the group and its members.  I don't think that will be possible... I cannot think of any logic that could identify that area because the items once rendered are treated as individual items.  Sorry for the misdirection on that my friend!

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, June 6, 2012 2:57 PM
    Moderator
  • no worries man...  i thought you were a superhero but I guess you are just human :-)

    i feel like that's almost a flow in the design of the listview...  what if i wanted to add alternating backgrounds to groups or borders or anything else like that!!!  this makes it impossible...

    I will investigate some more and see if there is a way for me to do some jquery magic to wrap the related items into a div....  

    Let me know if you find anything about this...

    do you know if microsoft plans to open source these controls?


    www.emadibrahim.com

    Wednesday, June 6, 2012 3:01 PM