Bootstrap has a simple solution to have sticky blocks in your html. I’ve given a simple example in my previous post: How to make sidebar as Sticky
It works like a charm. But, things get little frustrated when it doesn’t work in drupal 8.
I have 2 column theme in bootstrap 4, and wanted to use a block as sticky in right sidebar. I made the changes, and expected it to be sticky. However, it didn’t. I spent lot of time in digging the root cause of it.
How I debug sticky problem
By some brute force, I found that drupal is adding an extra DIV, before my sidebar with code like:
<div class="region region-sidebar-first">;
...
</div>Due to this, sticky behavior was not being set somehow.
Then, my next objjective was to remove this div.
I enabled debug: True in services.yml, and saw that it was coming from a layout/region.html.twig
I copied that file to my theme folder, see before and after code:
<script src="https://gist.github.com/goravsingal/461a6e42485a8dd04d5636a79579df89.js"></script>Finally Issue is solved
I saved the file, cleared cache. And, voila. It worked.
$ subscribe --weekly
One deep dive a week, in your inbox
System design, AI engineering, trading systems and interview prep. Tested code, real numbers. Free, and you can unsubscribe any time.
or read it on gyanbyte.substack.com
