Prevent items from getting pushed around in multiline text
salesp07 opened this issue · comments
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).
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?
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.
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>