tejveer
KPCKevin Powell - Community
•Created by tejveer on 8/22/2024 in #front-end
Outline transition duration issues
https://gyazo.com/9989a2e09cee6d53cbac555ef24d155a
I'm trying to apply a duration on the outline for the start button, for some reason, it has a weird delay, not sure if you can notice. It immediately loads the outline, a bit, then, immediately loads the rest after. It's not smooth. Here's the code:
Anyone know why?
6 replies
KPCKevin Powell - Community
•Created by tejveer on 8/12/2024 in #front-end
How to get flex item to remain fixed?
So I was trying to make an insult generator for fun and ran into the following issue:
https://gyazo.com/29b1019b9220b9f1a8f25b242769735a
The content div at the bottom has fixed with auto height. And so when content randomly changes on every submit, the height changes relative to that content. The height's changes then also end up changing its sibling's position. The sibling is just the input-button pair div. The pair div and the content div are items in a flex column container.
I don't want it to be this way. I want the sibling div to have a fixed position where it is regardless of the content of its sibling. How do I do this?
11 replies
KPCKevin Powell - Community
•Created by tejveer on 8/7/2024 in #front-end
Weird onMouseEnter behavior
Here's an abstraction of the React I have:
The
h4
has an onMouseEnter
and onMouseLeave
event that sets the isNameHovered state which is responsible for rendering the message.
It does what it's supposed to do but for some reason the message opacity changes relative to position within the h4.
https://gyazo.com/bd8fad7560ee8d78f74edbdde4d80f59
This only happens if I try to enter the h4 from the bottom; the top is fine. I have no animation styles set on anything relating to this.10 replies
KPCKevin Powell - Community
•Created by tejveer on 8/6/2024 in #front-end
Element not inheriting parent element's height
![No description](https://cdn.answeroverflow.com/1270426298069553192/image.png)
42 replies
KPCKevin Powell - Community
•Created by tejveer on 7/26/2024 in #front-end
Making transition to new screen smoother
I'm making a todo app and I've designed it so that when I press the add button a new screen appears. Like this (https://gyazo.com/cb7d487262c55342077216c52b830407).
But the transition is too 'blunt'. How do I make it smoother? For reference, I'm using React + Tailwind; this is the relevant code that adds the screen.
2 replies
KPCKevin Powell - Community
•Created by tejveer on 7/26/2024 in #front-end
On focus border changing component size
https://gyazo.com/90ba846f18909e47d3112f2ff377c829
When I focus on the input, the border is added, but for some reason, the other components change their size accordingly. Is there a way to prevent this from happening?
Here is the code for that particular element. Its parent is a flex container, for context.
5 replies
KPCKevin Powell - Community
•Created by tejveer on 7/23/2024 in #front-end
Replicating Android Clock
Hello everyone, would it be possible to have some pointers regarding how to begin making something like this in React?
The bottom div containing the times for various locations appears to be moveable. And the content of the div at the top fades relative to the position of the bottom div.
If the bottom div reaches a certain threshold height then it collapses either to the top or to the bottom.
I'm new to frontend and having difficult time figuring out which concepts I should use to begin implementing this.
4 replies