Sidebar Sticky isn't working on the Custom Widget

arman777

Hi Everyone, I'm new to the platform.
I'm building a Custom new widget. It's pretty simple concept.
Right side will be sticky & left side will scrollable. CSS Styling & everything is showing properly but "Position: sticky" isn't working.
No matter what I'm doing, the stickySidebar isn't sticky. (I've attached a image)

Can anyone please tell me is it overriding by any duda's css or what I'm doing wrong?

I've put the code below.

HTML CODE :

<div class="sectionContainer">

    {{#each sidebarSection}}

        <div id="section{{@index}}" class="sidebarSection">

            <h3 class="title">{{sectionTitle}}</h3

            <p class="content">{{{sectionContent}}}</p>

        </div>

    {{/each}}

</div>

CSS CODE :

.stickySidebarContainer {
/display: flex;/
display: grid;
grid-template-columns: 5;
gap: 2rem;
text-align: left;
}

.stickySidebar {
height: 100vh;
position: sticky;
top: 1%;
overflow: auto;
font-size: 18px;
font-weight: bold;
}

.sidebarLink {
padding: .5rem;
margin-bottom: .5rem;
border-radius: .5rem;
}
.sidebarLink a {
text-decoration: none;
}

.sectionContainer {
grid-column: 2 / 5;
padding-left: 1rem;
padding-right: 1rem;
}

.sidebarSection {
border: 1px solid #e4e5f0;
border-radius: 1rem;
padding: 0 1rem 1rem;
margin-bottom: 1rem;
}

.title {
font-size: 28px;
}
.content, .rteBlock {
font-size: 18px;
font-weight: bolder;
}

.active {
color: #009B8D;
background: #F4F6FA;
}

Aj_Cre8

.stickySidebar {
height: 100vh;
position: sticky;
top: 1%;
overflow: auto;
font-size: 18px;
font-weight: bold;
}

I am not seeing any element with the .stickySidebar class to call the position sticky!

Aj_Cre8

You are also missing a closing tag in the <h3> element.

Aj_Cre8

If you change your "sidebarSection" class to "stickySidebar" you should be good.