Making your Trix toolbar sticky

Editing long sections of text can be cumbersome with the Trix editor. Let's make it better

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.

Recent posts View all

Ruby

A quick tip to speed up bundle installs

Use more computing power to install gems faster

Rails

Getting Turbolinks to work with Webpack

How to re-add Turbolinks back into a Rails app when moving to Webpack