reaction labels are not showing while using overflow-x to hidden about react-reactions HOT 25 CLOSED

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

from react-reactions.

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!

from react-reactions.

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

from react-reactions.

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

from react-reactions.

#51 was resolved in version 0.4.0

from react-reactions.

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

from react-reactions.

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.

from react-reactions.

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?

from react-reactions.

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

from react-reactions.

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.

from react-reactions.

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.

from react-reactions.

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

from react-reactions.

I will work on it this weekend.

from react-reactions.

I will work on it this weekend.

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

from react-reactions.

yes

from react-reactions.

yes

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

from react-reactions.

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

from react-reactions.

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

from react-reactions.

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

from react-reactions.

This issue is more difficult than I initially thought.

from react-reactions.

@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.

from react-reactions.

@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

from react-reactions.

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.

from react-reactions.

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

from react-reactions.

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

from react-reactions.