2

I have a list of elements that has a list of points within each element. Each element is a way to group the points and therefore is the heading for each region. I have managed to get these to group in regions that expand and contract to show or hide the grid of points. My issue is that the solution I have managed to find only works if the elements are hard coded in the .razor page, while I need it to be bound dynamically as the list of elements can have a varying count.

My Question is what am i doing wrong to have caused such issue, and how do i fix it?

My solution was constructed based off the following article:

How can I make multiple on scroll fixed headers/navbars that stick at the very top of the page?

I want this effect but I also want the content regions to show/hide their content:

<style>
    
    h1 {
        margin-top: -1rem;
        padding-left: 10px;
        color: #fff;
        font-weight: 100;
    }

    .content {
        width: 100%;
        height: 100%;
        background: linear-gradient(70deg, orange, crimson);
    }

    .content .header {
        width: 100%;
        height: 50px;
        position: sticky;
        top: 0;
        background-color: dodgerblue;
    }

    .content .header::marker {
        color: transparent;
    }

    .content-summary {
        padding-top: 25px;
    }

    details {
        height: 100%;
    }

    details > .header::after {
        position: absolute;
        right: 2rem;
        content: "\276F";
        transform: rotate(90deg);
        transition: all 0.2s ease-in-out;
        top: 1rem;
    }

    details[open] > .header::after {
        position: absolute;
        right: 2rem;
        content: "\276F";
        transform: rotate(-90deg);
        top: 1rem;
    }

</style>


@foreach (var element in ElementsList)
{
    <div class="content">
        <details>
            <summary class="header"><h1>element.Heading</h1></summary>
            <div class=".content-summary">
                **Display Grid here with every point in element.PointsList**
            </div>
        </details>
    </div>
}

If instead of using a foreach i just hardcode each element it works to the desired effect.

Matt
  • 31
  • 5
  • You can [accept your own answer](https://stackoverflow.blog/2009/01/06/accept-your-own-answers/?_ga=2.193034413.1451297837.1689037886-1280310273.1689037879) if it's helpful to others facing the same problem. – Jianwei Sun - MSFT Jul 13 '23 at 01:12

1 Answers1

1

Turns out the above code is correct and 100% functional, however after stripping everything out and testing while adding small pieces back i figured out that the Dev Express grid that I was using to display the points had a z-index higher than that of my headings. all i had to do was add z-index as follows:

.content .header {
    width: 100%;
    height: 50px;
    position: sticky;
    top: 0;
    background-color: dodgerblue;
    z-index: 1000;
}
Matt
  • 31
  • 5