Make the textarea editor stick

I suppose the textarea’s buttons are at the bottom of the field because the field expands downward naturally and when someone is composing content the buttons are just beneath the copy they’re inputting. But if you’re like most people you’re expecting the tools to be at the top. If you have a long body of copy and you want to format something at the top of the field you’ll need to make the selection then scroll down to the buttons to apply it, then scroll back up to confirm it’s been applied. I would suggest anchoring the buttons on the top of the textarea field and fix it to the top of the browser window while the field is filling the vertical space of the panel page so the tools are always available even if you have a long texteara field. See mockup below. Of course the buttons would anchor back to to the top of the field when you scrolled the page up (e.g. you don’t want the buttons fixed to the top of the browser window at all times).


If you don’t want to wait for this to happen, you can use a custom stylesheet to achieve that:

Thanks for the tip. I’ll research that a bit further.

I don’t think that idea is possible with only CSS. If it’s the idea from the WordPress editor, the buttons only appear when the textarea is in view. That would require some javascript as well.

When scolling down to the next element they disappear and appear again when next textarea is in view.

Correct me if I got the whole idea wrong.

Yes, my suggestion is only a workaround and only works to fix the buttons at the top of the textarea, not at the top of the browser window.

Can someone please give us the css-code we need to have this on our panel fields.


Try this:

.field-buttons {
  position: absolute;
  top: 2px;
  bottom: auto;
  border-bottom: 1px solid #efefef;
  border-top: none;
.field-with-buttons .input {
  padding-top: 2.5em !important;
  padding-bottom: 0.5em !important;

Thank you for your code, but it does not fit:

The buttons now are nailed down at the top of the textarea window and scroll away with the window but do not stick at the top of actual view like in the hardcopy (the first words of the text are not visible).

Yeah, but as @jenstornell said, that cannot be done with just css. What happens if you have more than one textarea field?

For the most recent versions of Firefox and Safari, you could try position: sticky, and add a javascript polyfill for non-supported browsers:

I think, that would only work as expected, if the buttons were located before the textarea field in the DOM; as it is, if you use position: sticky it will stick to the bottom, not the top.

You could, of course, try that in combination with a custom textarea field where the button bar is at the top.

Again, what would happen if you have more than one textarea field?

Based on my suggestion, multiple textarea fields would not pose any funkiness. This is where a animated gif would communicate it best but I’ll try to explain…

First off, the buttons are on top of the fields instead of the bottom. Easy. We all get that. The buttons stick to the top of the browser window when they hit the top of the browser window. From then on, as you scroll, they’re floating above the textarea field. As soon as the buttons hit the bottom of the textarea field they stop “floating” and get out of the way.

Consider this feature is most useful when you have a large body of copy to compose and/or when screen real estate is limited.

To compliment this feature (and perhaps further warrant it) I think a slightly more flexible set of buttons would be welcomed. As mentioned here.