Kan I center a component

[RuneClaeys]

I'm switching over from storybook and I'm looking for a way to copy this storybook behaviour to Histoire

export default {
  title: 'Button',
  component: Button,
  parameters: {
    layout: 'centered', // <-------------- how can i center the layout
  }

Can this be done in -or added to histoire

[Akryum]

What would it look like?

[RuneClaeys]

in storybook it just renders te component center of the canvas.

[RuneClaeys]

maybe you could just pass it to layout as an option?

<Story :layout="{type: 'single', iframe: true, centered: true}"> ... </Story>

[Akryum]

What about you center it with CSS in the story? Wouldn't that be enough?

[hrishikesh-k]

I had a similar requirement. I have a few buttons with shadows and something seems to be clipping all the content outside the box:

I tried in iframe and non-iframe mode. Not sure which of the elements in hierarchy is setting overflow:hidden, I tried checking the DOM extensively.

[hrishikesh-k]

Okay, just found out, it's:

.__histoire-render-story:not(.__histoire-render-custom-controls)

that sets overflow:auto. Sadly overflow doesn't take into account box shadows. I might have to add a wrapper div with padding.