S-stack Component – No Option for Disabling Wrap Like wrap={false} in Polaris <Inline />

Polaris
1

I’m using the s-stack web component to layout items horizontally, but I couldn’t find any option similar to flex-wrap="nowrap".

In the Polaris React package, the <Inline /> component provides a wrap={false} prop to prevent items from wrapping. Is there a similar property or workaround available in s-stack to achieve the same behavior?

Looking for guidance on how to disable wrapping within s-stack.

Thanks in advance!

2

Unfortunately, the Stack component doesn’t currently have any prop to opt out of wrapping.

Are you able to provide screenshots/additional context so we can better understand the UI that you’re building?

3

I have a use case as shown in the image. I have long text with action buttons placed beside it. Without setting flex-wrap: wrap, the action buttons move to a new line, which I don’t want. I want the layout to remain as shown in the image — the actions should stay on the right, and only the text should wrap to a new line if it’s too long.

image
image400×136 6.88 KB

4

I feel the s-grid component would be better here:

<s-grid gridTemplateColumns="minmax(0, 1fr) auto">
  <s-stack>Title and action</s-stack>
  <s-stack direction="inline">
    The buttons
  </s-stack>
</s-grid>
3 Likes