Wrong truncation with flexbox

[5erban]

We're currently facing an issue. We have a responsive tile layout implemented with flexbox. Upon "violent" window resizes, such as maximize, there is a desync between flex wrapping and truncation. Truncate takes the width of the container prior to flex growth/shrinkage. Therefore, we often get strange truncation results. We've currently fixed this with an enhanced component using timeouts and calling calcTargetWidth via a ref (yuck...). Do you think there is a way to fix this issue directly in the library?

Let me know if you need any additional info.

[pablosichert]

The library already does the "hacky" thing by listening on the resize event and calling calcTargetWidth, just like you do.

You could improve it a bit by only calling it when the size of your parent container changed. Which is no easy task by it's own - but I guess that's a limitation of the abstraction.

Please have a look at the new width property in https://github.com/One-com/react-truncate/issues/49 & related, maybe it can help you here.

[sushilbansal]

Hi @PabloSichert how i can use flexi width. Can you please provide a short snippet? I am facing issue where the text is properly truncated when it loads but when i return to that page it is adding the width of an element on its left hand side (in this case navigation). Check this example: https://bakbak.netlify.com/

Click on the post title and then hit back button. You will see that it is messed up.

[voltmer1]

pablosichert , I have a query using pnp/sp/search, returning multiple items to paginated pages and there are incorrect breaks in the copy as others are seeing. So, I've tried using :

setTimeout(() => { this._truncateRefs.forEach((ref: any) => { ref.onResize(); }); }, 1);

with no results. You mention using the "width" property, but I don't want to give it a static value as the page size changes it breaks. How would the implementation look using "width". The width property is calculated within the Truncate component and checks componentDidUpdate against the previous value, so why isn't it updated in the dom?