Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sidebar with sticky = true #700

Closed
Cloud-Forge opened this issue Feb 4, 2020 · 4 comments · Fixed by #788
Closed

Sidebar with sticky = true #700

Cloud-Forge opened this issue Feb 4, 2020 · 4 comments · Fixed by #788
Assignees
Labels
Milestone

Comments

@Cloud-Forge
Copy link

Is this a BUG REPORT or FEATURE REQUEST?:
bug

What happened:
The sidebar sticky = true doesn't stick !

content.html (content fragment)

if you choose sticky = true
for the sidebar in a content fragment. The sidebar doesn't stick.

What you expected to happen:
the side should stick when one scroll down.
but it doesn't !

How to reproduce it (as minimally and precisely as possible):
To reproduce get a content fragment with a sidebar (either left or right)
set the sticky Boolean to true, check in the source code that the class

sticky-top pt-3

is set for the child element of content-sidebar
Then scroll down, you'll see that the element is not sticky.

Anything else we need to know?:
I tried with

  • Brave Version 1.2.43 Chromium: 79.0.3945.130 (Official Build) unknown (64-bit)
  • and Firefox 72.0.2 (64-bit).

I think that the problem comes from the fact that the parent element of #sticky-top div :
aka :

.content-sidebar {
  word-break: break-word;
  overflow-y: auto;
}

has got the style : overflow-y: auto;

I made it work by adding one div around the first sticky-top :

        {{- if .sticky }}
          <div class="sticky-top pt-3"> <div class="pt-3">
        {{- end -}}

[...]

    {{- if .sticky }}
          </div></div> {{/* .sticky-top */}}
          <div></div>
        {{- end -}}

and I add in _syna.css:

.sticky-top{
    top: 50px;
}

and remove overflow-y from :

.content-sidebar {
  word-break: break-word;
/*   overflow-y: auto; */
}

Environment:

  • Syna Theme version: v0.17.0
  • Hugo version: Hugo Static Site Generator v0.63.2/extended linux/amd64 BuildDate: unknown
  • Others: Arch linux
@stp-ip stp-ip added the bug label Feb 4, 2020
@stp-ip stp-ip added this to the v0.16.2 milestone Feb 4, 2020
@stp-ip
Copy link
Member

stp-ip commented Feb 4, 2020

Thanks for the report and the details. Happy for @mpourismaiel to jump in and happy to receive a PR once we get an ack.

@mpourismaiel
Copy link
Member

That line was added in 01ebc83 but I'm not sure why I added it to that commit (I really have to separate concerns when committing). Removing the overflow-y: auto; line would prevent sidebar from scrolling on overflow which I believe would be a bigger problem. I haven't found a solution for it though so I think keeping this bug is preferable to fixing it and adding a bigger bug. (visual vs accessibility.) What do you think @stp-ip ?

@stp-ip
Copy link
Member

stp-ip commented Apr 23, 2020

Moving this to the next milestone. Will try to figure out a feasible solution without breaking overflow scrolling.

@stp-ip stp-ip modified the milestones: v0.17.0, v0.18.0 Apr 23, 2020
@stp-ip stp-ip assigned stp-ip and unassigned mpourismaiel Apr 23, 2020
@stp-ip
Copy link
Member

stp-ip commented Apr 23, 2020

This seems related to #601 as well.

@stp-ip stp-ip modified the milestones: v0.17.1, v0.18.0 May 23, 2020
@mpourismaiel mpourismaiel self-assigned this Jun 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

Successfully merging a pull request may close this issue.

3 participants