search

HermanNygaard / react-scroll-to-top

Lightweight button component for scrolling to the top of a page
https://www.npmjs.com/package/react-scroll-to-top
MIT License
61 stars 12 forks source link

Arrow isn't centered #41

Closed ghost closed 2 years ago

ghost commented 2 years ago

When using the ScrollToTop component, the arrow in the box isn't centred.

I didn't add any other code.

Repo, (index.tsx): https://github.com/YinChuRijnaard/Portfolio-v3 (exact commit: https://github.com/YinChuRijnaard/Portfolio-v3/commit/5cf0100670f6c2a84fcd8a5928ea8bc854956e96).

Screenshot 2022-07-11 at 18 25 40
HermanNygaard commented 2 years ago

Your repo seems to be private, gives 404. I can't repro this, can you repro in a codesandbox? My guess is your project might have some global css interfering.

ghost commented 2 years ago

Excuse me, I thought I changed the visibility.

Do you still wish to see a CodeSandbox? :)

HermanNygaard commented 2 years ago

It's fine. I cloned your repo locally and inspected it, seems like tailwind adds display: block to svg's which messes up the centering. A temp fix for you might be to add style={{display: "flex", justifyContent: "center", alignItems:"center"}} to ScrollToTop

image
ghost commented 2 years ago

Alright, thank you for this information. How would I be able to inspect such things myself in the future? Simply with the dev tools?

HermanNygaard commented 2 years ago

Yup, I inspected the svg element in devtools

ghost commented 2 years ago

Okay, thanks again for your time! Closing this issue 👍🏼