Small widths for sp-textfields

How can I get sp-textfield to be smaller than around 50px? As some point, setting the flex-value to a lower value doesn’tr change anything. The cutoff seems to be around 50px.

Here’s the CSS I use (36px doesn’t really work any more here) …

sp-textfield.svnarrowest {
  flex: 0 36px;
  margin-left: 6px;
  background-color: red;
}

Medium-sized sp-textfields are limited to a minimum width of 48px (this is true of the Spectrum Web Component version for the web as well).

There’s no provision for going smaller (and w/ the padding in the control, very much smaller would result in the inability to render any text).

You can go a little smaller with the small sp-textfield in PS 22.5+ (currently in prerelease):

<!-- small text field minimum is 36px wide; room for 2 characters -->
<sp-textfield size="s" style="width: 36px">...</sp-textfield>

We’ll be adding an option (probably appearance: none) that will enable you to drop the built-in styles, which would give a bit more freedom here (important for being able to edit a label in a card, for example, without adding extra borders), but it’s not something currently available. I do not have a TBD on when this will be available.

1 Like

Thanks for the clarification.

@kerrishotts will it also be possible to decrease the height of the textfield?

In 5.2+, the small sp-textfield is 24px high (the medium size is 32px).

2 Likes

thanks @kerrishotts always kind! 24px is perfect for my panel!

Do these updates always come with the Photoshop-Updates? Is there a place where we can see when the updates for UXP are implemented and what they contain?

1 Like

There will be an update to docs w/ a huge changelog for the next release, but also something even more interactive coming shortly. Will share links when that happens.

UXP updates always come through the host’s update; UXP is not updatable out-of-band.

2 Likes