I had a component that I needed to add to Storybook. It was working fine, but the styling was slightly off. I managed to resolve this by adding inline styling with position: absolute. Here is how it looks now:
const Template: any = (args: any): any => ({
components: { Teaser },
setup() {
return { args };
},
template: '<teaser style="position: absolute" v-bind="args" :image="args.image"/>',
});
However, after fixing the style issue, I noticed that the canvas height in Storybook where the component is displayed had decreased significantly, cutting off most of the content. You can see the issue here:
I attempted to set a higher canvas height specifically for this component by adding another style attribute like height=400px, which has worked for me in similar cases. Unfortunately, this solution did not work in this scenario.
Does anyone have any ideas on how to resolve this?