the size of the gosling component doesn't fit in the parent container after upgrade from 0.9.8 to 0.9.9

[zhangzhen]

The following screenshot shows that the gosling component overflows the parent container. How can I solve this issue?

[sehilyi]

To be able to replicate, I assume you are using the experimental.reactive flag and changing the width of all tracks in your specification considering the size of the parent container?

[zhangzhen]

To be able to replicate, I assume you are using the experimental.reactive flag and changing the width of all tracks in your specification considering the size of the parent container?

I'm not sure. Setting the experiment.reactive flag to true didn't cause this kind of issue when using 0.9.8. Besides, the overflowing come up on the initial rendering of this modal dialog.

[sehilyi]

Thanks for giving more information. It looks like the reactive option is not related to this issue.

Could you check on the browser inspector whether the size/padding/margin of the Gosling Component is exactly the same compared with how they are specified in its properties and your spec, e.g.,

<gosling.GoslingComponent
    ref={gosRef}
    spec={goslingSpec}
    theme={theme}
    padding={60} // <--
    margin={0}   // <--
    border={'none'}
    compiled={(g, h) => {
        setHg(h);
    }}
/>

// goslingSpec
{
   ..., width: xxx, height: xxx // <-- (cumulative of such properties)
}