Sanity
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

text
field there's
rows
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
intro
field is likely to be smaller than
body
in this case:

May 10, 2021, 2:52 PM

Hi

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

className
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?
https://www.sanity.io/docs/styling#d7f9b5cc2adb

May 10, 2021, 3:12 PM

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

className
suggestion to the components team, thanks!

May 10, 2021, 3:21 PM

Sanity.io: Get the most out of your content

Sanity.io 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.