Get a peek at our latest innovations at Sanity Product Day on Dec 8th →

How to Reduce the Size of a Block Content Field

3 replies
Last updated: May 10, 2021

Is there any way to reduce the size of a Block content field? For a

field there's
but there appears to be no such thing for a PortableText editor. It would help to free up some screen space, as well as provide a proper visual cue - an
field is likely to be smaller than
in this case:

May 10, 2021, 2:52 PM


user P
, great points on screen real estate and visual cues. Unfortunately, it's not possible today to control the height of a block content field, but it's an important feature request. I've also seen it come up for a single-line block content field, e.g. to allow a few styling options on a short label text.
Here's a workaround, although it's not the prettiest. This would decrease the height on
all block content fields, but it might be possible to target one of them specifically [will have to look into that]:
:global([class^="PortableTextInput_editorBoxContent"]) {
  height: 8rem;

May 10, 2021, 3:07 PM

Thanks for your input! Would be great if we could have something like

as an option for any of the fields. That way we could target specific fields quite easily.
PS I presume I would have to set up the css like this then?

May 10, 2021, 3:12 PM

That's correct, it should be in the overrides. I should have specified 🙂 Will forward the

suggestion to the components team, thanks!

May 10, 2021, 3:21 PM Get the most out of your content is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Free to get started, and pay-as-you-go on all plans. Find out more.