search

WinterCore / react-text-transition

Animate your text changes
MIT License
614 stars 26 forks source link

How do I align the text in centre? #10

Closed raghav4 closed 4 years ago

raghav4 commented 4 years ago

I'm using mdbootstrap when I'm trying to align the text to the centre, I cannot override it.

Here's the link to the sandbox,

The text is aligned to the left. The mdbootstrap's text-align class is not working with it.

raghav4 commented 4 years ago

I've tried aligning the text using the custom styling, style={{ textAlign: "centre !important" }} but it didn't work too.

WinterCore commented 4 years ago

Yeah I know. I'm looking into it. Just give me some time 😉

raghav4 commented 4 years ago

Yeah I know. I'm looking into it. Just give me some time 😉

Justed wanted you to know! Thanks 😅

WinterCore commented 4 years ago

Hey @raghav4.

Normally you would just have to add the inline prop. but that didn't work because the text was being wrapped on multiple lines (the width calculation was always wrong). So I just had to add white-space: nowrap to the container.

Here's an updated codesandbox example.

Make sure to update to the latest version 1.1.0 and provide the inline prop.

Thanks for reporting this 😃.

WinterCore commented 4 years ago

Resolved in GH-11

raghav4 commented 4 years ago

Thank you @WinterCore, it worked. Testing out some other things as well might report them too!

WinterCore commented 4 years ago

Hey @raghav4.

is it possible to use this as a component to animate the

I'm not sure that's possible. Maybe you can try this other package react-text-loop

Sorry for interrupting again, it doesn't work for paragraphs. I tried it for lorem ipsum placeholder text, it should have given a responsive behaviour.

Have you tried removing the inline prop, the text should automatically break into multiple lines.

Let me know if you need anything else 😀.

WinterCore commented 4 years ago

Have you tried removing the inline prop, the text should automatically break into multiple lines.

Sometimes changing props needs a full-page refresh in order for it to work. I'll work on fixing that soon.

raghav4 commented 4 years ago

Have you tried removing the inline prop, the text should automatically break into multiple lines.

Sometimes changing props need a full-page refresh in order for it to work. I'll work on fixing that soon.

Yes, exactly as you're saying. Thank you! 😄