search

charkour / react-reactions

😲 Create custom reaction pickers and counters or use your favorites!
MIT License
74 stars 16 forks source link

reaction labels are not showing while using overflow-x to hidden #53

Closed the-wrong-guy closed 2 years ago

the-wrong-guy commented 3 years ago

Hey, can you check this bug where you give overflow property hidden to the parent div and the labels on the emoji stop showing

https://codesandbox.io/s/sweet-joliot-tzkuw?file=/src/App.js

And also can you show me the files where the styles are, so I can also make a PR

charkour commented 3 years ago

Nice catch. Thanks for the reproduction on CodeSandbox.

The PokemonSelector uses the FacebookSelector so you should edit those styles. Here is the FacebookSelector Reaction Bar and the Reaction Bar Emoji.

Thanks!

the-wrong-guy commented 3 years ago

Nice catch. Thanks for the reproduction on CodeSandbox.

The PokemonSelector uses the FacebookSelector so you should edit those styles. Here is the FacebookSelector Reaction Bar and the Reaction Bar Emoji.

Thanks!

I have made a PR, check it if that works

charkour commented 3 years ago

Hey @the-wrong-guy,

I checked out the PR, but I do not think it solves your issue while wrapping the PokemonSelector inside a div with overflow: hidden. Just remove overflow: hidden and the labels will work properly.

Why do you need to have overflow hidden? I don't think this is an issue.

Thanks.

charkour commented 3 years ago

If you want, I could make it so you can pass styles to the component, so you could add margin to the top of the component so then you can make sure the labels are not cut off when using overflow hidden.

Would a prop to pass styles be helpful?

the-wrong-guy commented 3 years ago

If you want, I could make it so you can pass styles to the component, so you could add margin to the top of the component so then you can make sure the labels are not cut off when using overflow hidden.

Would a prop to pass styles be helpful?

Well i am making an animation like on clicking an emoji the selectors will slide in from transform: translateX(100%) to transform: translateX(0) and again on clicking it will slide out slide in from transform: translateX() to transform: translateX(100%) so i need to hide the selectors that's why i need to use overflowX : hidden

I hope you get my point, maybe you should also add that kind of animation by default, that will be much helpful to the users

charkour commented 3 years ago

Would it be possible for you to create a demo of the problem you are experiencing with the animation? It sounds good but I cannot picture exactly what is happening.

the-wrong-guy commented 3 years ago

Here it's https://codesandbox.io/s/sweet-joliot-tzkuw?file=/src/styles.css

charkour commented 3 years ago

That's awesome! Thanks. I understand now.

I think we can fix those labels by creating the ability to pass style props to different parts of the Selector component.

Sorry I didn't understand your request at first.

the-wrong-guy commented 3 years ago

That's awesome! Thanks. I understand now.

I think we can fix those labels by creating the ability to pass style props to different parts of the Selector component.

Sorry I didn't understand your request at f

That's awesome! Thanks. I understand now.

I think we can fix those labels by creating the ability to pass style props to different parts of the Selector component.

Sorry I didn't understand your request at first. Hope you do will do it ASAP

charkour commented 3 years ago

I will work on it this weekend.

the-wrong-guy commented 3 years ago

I will work on it this weekend.

Did you also fixed the previous enhancement that I talked about?

charkour commented 3 years ago

yes

the-wrong-guy commented 3 years ago

yes

Well, what props to use, cause you didn't updated the documentation

charkour commented 3 years ago

If you're having another issue, please open another issue and we can discuss it there. Thanks.

the-wrong-guy commented 3 years ago

If you're having another issue, please open another issue and we can discuss it there. Tha

If you're having another issue, please open another issue and we can discuss it there. Thanks.

Well I did that but I think you closed the issue, check your issues

the-wrong-guy commented 3 years ago

If you're having another issue, please open another issue and we can discuss it there. Tha

If you're having another issue, please open another issue and we can discuss it there. Thanks.

Well I did that but I think you closed the issue, check your previous issues by me

charkour commented 3 years ago

If the issue is closed then the issue has been resolved.

charkour commented 3 years ago

51 was resolved in version 0.4.0

charkour commented 3 years ago

This issue is more difficult than I initially thought.

charkour commented 3 years ago

@the-wrong-guy, does this demo solve your problem? I added opacity: 0; and pointer-events: none to the class PokemonSelector_Idle and removed overflowX: hidden from the parent div.

Please let me know if this solves your problem and then I can close the issue.

the-wrong-guy commented 3 years ago

@the-wrong-guy, does this demo solve your problem? I added opacity: 0; and pointer-events: none to the class PokemonSelector_Idle and removed overflowX: hidden from the parent div.

Please let me know if this solves your problem and then I can close the issue.

Well actually it didn't, you can see this codesandbox, they are overlapping the button and after that, I can see the Selectors for some secs before fading out, i don't want it to show after the button

charkour commented 3 years ago

Okay, thanks for the code sandbox. I understand better now what your question is. I don't have time to look into this now, but what I would do is use overflowX: hidden on the parent div, and when you click the button to show the Selector, then setTimeout() for 200ms and remove overflowX: hidden once the selector has slid into the location.

I can make a demo once I have time, but that might be in a couple weeks. This is lower priority since this isn't a bug but an issue with your CSS rules.

the-wrong-guy commented 3 years ago

Okay, thanks for the code sandbox. I understand better now what your question is. I don't have time to look into this now, but what I would do is use overflowX: hidden on the parent div, and when you click the button to show the Selector, then setTimeout() for 200ms and remove overflowX: hidden once the selector has slid into the location.

I can make a demo once I have time, but that might be in a couple weeks. This is lower priority since this isn't a bug but an issue with your CSS rules. Sure, until I will also try to solve this

charkour commented 3 years ago

@the-wrong-guy, How does this demo look?

charkour commented 2 years ago

Closing due to inactivity. I believe the previous demo solves the issue.