😎 Discover cool tips and tricks for customization in our next Developer Deep Dive virtual event - sign up now!

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– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?