Prevent items from getting pushed around in multiline text

[salesp07]

I'm not sure if this is possible because it might have been built differently, but I was looking for something like the fixed prop from react-typewriter. Something that would pre-render the space needed for the text to prevent items below the typing component to get pushed down in the case of multiline text (or even single line text - there is a small tilt from 0 lines to 1 line).

[maxeth]

Hey,

there's a small docs section about CSS caveats, maybe that's useful. You can define fixed dimensions for the animation via css or the style prop as shown here.

<TypeAnimation
  style={{ height: '195px', display: 'block' }} // Set a fixed height to not shift other elements vertically
/>

In addition to defining a fixed width/height, it's important you set display as block or inline-block.

---

On a side note: I don't quite understand what that fixed prop does. How can we have a fixed size if we don't set it explicitly via CSS?

[salesp07]

Hey @maxeth , thx for the reply.

Not exactly what I was looking for, since it would be very hard to make the container responsive with a fixed height.

As far as I understand, on react-typewriter, they have visible and invisible characters; and invisible characters can have one of 2 styles depending on the fixed prop, display: none or visibility:hidden, with the latter allowing the enclosing container to have a fixed responsive height from the start of the animation.

However, I haven't had the chance to see the innner workings of this module, so feel free to close this issue if it's not feasible to implement.

[maxeth]

@salesp07

Thanks for explaining. Seems pretty useful, and it would theoretically be possible to add such a prop.

Maybe for now you could try rendering the <TypeAnimation/> with position style={{position: "absolute"}} and the longest possible string of the sequence as a separate, transparent div, within the same parent element to simulate that behaviour.

So something like this:

<div style={{position:"relative"}}>
 <TypeAnimation style={{position:"absolute"}}/>
 <div style={{opacity: "0"}} aria-hidden={true}>Longest possible sequence here</div>
</div>