Giters

abouolia / sticky-sidebar

😎 Pure JavaScript tool for making smart and high performance sticky sidebar.

Home Page:https://abouolia.github.io/sticky-sidebar/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Having sidebar width always fitting the whole page's width

opened this issue · comments

commented

First of all, thanks a lot for this amazing library @abouolia

For some reason, sticky-sidebar is recalculating .sidebar__inner div to fit the whole width of the page. This is problematic as users could not click on anything on the right of the sidebar (on left).

Attaching a capture to illustrate:
Capture

I think I followed exactly the simplest setup instructions but this is code anyway:

<body lang="en">
  <div class="main-content">
    <div id="sidebar" class="sidebar">
      <div class="sidebar__inner">
        <%- include('../partials/shared/sidebar'); %>
      </div>
    </div>
    <div id="content" class="content">
     ...
var sidebar = new StickySidebar('#sidebar', {
  topSpacing: 60,
  bottomSpacing: 60,
  containerSelector: '.main-content',
  innerWrapperSelector: '.sidebar__inner',
  // disable for small screens
  minWidth: 768
});
commented

@abouolia do you know please ?

commented

The issue was with my inner HTML and not sticky-sidebar.
I had to set my nav element CSS: width: fit-content