Making your Trix toolbar sticky

Editing long sections of content with the Trix editor can be a suboptimal experience. You either have a fixed width for your input, which means lots of scrolling. Or you expand your textarea to the content, which I prefer but it means you lose your toolbar. In this post, I will show you the three CSS attributes you need to set to fix this.

What is Trix?

Rails has introduced ActionText which gives us WYSIWYG rich-text editing for free. ActionText is amazing! It uses Trix under the hood. I’ve written about how to test ActionText before.

Why do you want a sticky toolbar

You usually want to avoid sticky things, they are, well, gross. But for our purposes today what we want is for the Trix toolbar to sit where it usually is until it is about to go off the top of the screen, then it will follow the screen down.

We can explain better with an example, here is a codepen by MDN.

Making the toolbar sticky in Rails

Sticky toolbars are super quick to implement. In your CSS/SCSS file of choice add the following;

trix-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
}

• trix-toolbar is the name of the element we are acting on.
• position: sticky; tells the browser this is the element we want to be able to move when needed.
• top: 0; this tells the toolbar when to become sticky, the zero means “as you are about to go off the page”.
• z-index: 1; fixes an issue in Chrome with uploaded images hovering over the toolbar.