Comments (25)
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, thensetTimeout()
for 200ms and removeoverflowX: 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;
andpointer-events: none
to the classPokemonSelector_Idle
and removedoverflowX: 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.
Related Issues (20)
- More flexible Reaction Counter HOT 3
- Pass className to Selector HOT 11
- Dependency Dashboard
- Seems like a icon is missing HOT 3
- Closing the selector when clicked outside of the react-reactions component. HOT 6
- Add ref forwarding
- Slack add reaction shows empty box HOT 14
- Handle Slack fonts better HOT 1
- You didn't show in custom counter HOT 16
- Like not working on mobile touch HOT 8
- Hover on GithubCounter missing out on Chrome HOT 2
- Error when I import Reaction Counter HOT 3
- Changing color on background of reaction for slack counter HOT 2
- Reaction should have key and label to allow mutable text on tooltip to support i18n HOT 4
- Selector and Counter Bundlize as one HOT 4
- Make Slack selector opacity 1.0 by default, or allow custom styling HOT 1
- SlackSelector header/top bar category icons are missing HOT 2
- Slack Selector - Flag icons shows only letters on Windows
- Trouble styling some counters HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-reactions.