Sticky sections

Is it possible to make a page element/column/section sticky using custom css?

A while back @Nolan shared this with me to make the footer sticky:

.body {
margin-bottom: 134px;
footer {
position: fixed;
bottom: 0px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

Is it possible to modify this for use on a particular section instead of the footer?

You can probably accomplish what you’re looking for by assigning an ID to the section’s properties.

Once you’ve assigned that ID you can create a custom CSS rule for it

#my-fixed-section {
  position: fixed;
  top: 10px;
  left: 10px;

That CSS rule is just an example, but if you want to post a mockup of what you’re looking for we might be able to help you figure out the right CSS properties to be set.

Thanks @adam, I tried the css you showed me and it does work! The only difference is that I want to pin that section onto the bottom of the page, like a sticky footer (but not using the actual footer).

In this screenshot, I want the entire grey bar section to stay fixed to the bottom. Thoughts on modifications to the rule to achieve this?

ah, okay yes I think you can just use

#my-fixed-section {
  position: fixed;
  bottom: 10px; /* This can be any positive or negative number */

If you’re willing to get into the weeds with CSS, this is a decent article on positioning in CSS

I’m going to talk with the team about positioning in general today. We obviously don’t want this kind of thing to be complicated or require CSS knowledge to accomplish.

1 Like

That worked perfectly - thanks @adam!

One thing that I have now noticed is that the text block does not work correctly when put into a section using this css. In fact the text blocks in the entire record page where this section lives are no longer editing properly.

The text colour automatically sets itself and won’t change, functions won’t appear and the formatting exhibits some strange quirks.

Have you guys noticed any text block issues on your end lately?

@Andrew sorry for the delay. Can you post a screenshot or video of what you’re seeing? Since this is using CSS to re-position something I’m guessing it’s an edge case we haven’t discovered.

1 Like

@adam - @Nolan & @Steve discovered that it wasn’t an issue with the custom css after all, but rather an issue with locally applied settings on the fonts overwriting the font styles.

This issue is quite pervasive in my record pages, where the interface doesn’t save a setting change. For example, if I unbold a font on the page, it reverts back to being bold and can’t be switched. Has that appeared anywhere for you guys?