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

How to ignore Bullet in RSpec tests

Using Bullet during a test can pick up mistakes but also has false negatives; here is an easy way to ignore them

Ruby

How we used Nokogiri to fix a sizing issue in YouTube's oEmbed

At some point, one of our calls to YouTube's oEmbed endpoint was returning videos way too small; we fixed in in our Rails application by using Nokogiri