Sidebar Sticky isn't working on the Custom Widget

Options
arman777
arman777 Member Posts: 1

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;
}

Tagged:

Answers

  • Aj_Cre8
    Aj_Cre8 Member Posts: 651 MVP
    Options

    .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
    Aj_Cre8 Member Posts: 651 MVP
    Options

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

  • Aj_Cre8
    Aj_Cre8 Member Posts: 651 MVP
    Options

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