Kevin Powell - Community

KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

front-end

resources

back-end

ui-ux

os-and-tools

Y offset when toolbar is visible (Chrome Android only)

When the toolbar is visible, my circle's center's Y position is above the clip location by an amount that seems equal to the height of the toolbar. When the toolbar auto-hides during scroll, the circle's center is at the right place. It's only on Android, not on desktop even when enabling toolbar autohide....

Does a TextArea component affect its siblings? Why does this happen (video)

As you can see, when this is an input the button next to it is centered in the div. When it's changed to textarea (and that's ALL that changes) suddenly it's out of whack and the button is resting on the bottom. There are no CSS class changes or anything else changing - only the element type. Is this normal?...

server actions function use inside useEffect return undefined

``` export async function getRecipesForUser( userId: string ): Promise<RecipeResponse> { const user = await validateRequest();...
No description

Can position:relative and position:fixed be used together?

I have a Div container that contains a pen outline, with a z-index of 5, position: relative. When the viewer chooses an underlay graphic with z-index -2, position: absolute; it works fine but if the viewer scrolls down for more underlay choices, the pen outline scrolls off the top. How do I make the pen outline relative AND fixed so it stays on the screen when scrolling down?

To embed or to not embed?

My site has a very small amount of JavaScript. This snippet infact is the entirety of my JavaScript: ```js (document.getElementById("theme-button").onclick = () => { const theme = localStorage.getItem("theme") === "light" ? "dark" : "light";...

Trying to separate <ol> markers from text like this image from a Figma file.

I am really struggling to find a solution for this problem and it is so basic, The Second image is where I am currently and as you see the marker is not taking up both lines of text like the figma file, Please help me i have been looking for over 1 hour now. https://codepen.io/Steven-Stroud/pen/abgLzYO
No description

better way to make this note

i have this note in figma, idk how to make this in html bg is half-transparent...
No description

JS Shorthand

Steps to reproduce: 1]using if statement: ```let compValue; if(randomNum>=0&&randomNum<1/3){ compValue = 'Rock';...

Text growing like roots from terminals animation

Hey! I want to make an animation using the terminals of letters so whenever the user hovers over the word letter/letters extended from the letter terminals like roots (Just in case you are confused, terminals meaning the lower vertice of the letter) , how can I achieve this any suggestions?

Spanning n number of rows takes up space

I'm working on a form layout using CSS Grid, and I've encountered an issue where there's unexpected additional space at the bottom of my grid layout. Despite there being no elements explicitly placed in the third row, the space persists. I've attached a screenshot for reference. I know I can remove it by changing from row-span-3 to row-span-2 but I need it to stay at span-3. If I make it conditional if there is an error then row-span-3 if there is no error then span 2, but it gets bugged if the field next to it has an element in the third row. Could anyone help me identify the cause of this extra space and suggest how to remove it? Your insights would be greatly appreciated!...
No description

MPA element view transitions that don't animate forward?

What could cause view transitions to be ignored when navigating to another page, yet work as expected when navigating back ? All my view transitions are critical css and use unique ids. If I try to debug them in devtools then they start working. It's weird....

DELETE END POINT NOT WORKING

So my endPoint is not working when i press the button

Failed to resolve component

Anyone can help me what's the problem? It's working fine but when i go to the console this error show ```js [Vue warn]: Failed to resolve component: Section...

[solved] Device Scaling

Does anyone know how to target laptop viewports that scale up their resolution? I have a client using an Acer with 1920 x 1080 and in their settings "Scale" is set to 150%.
I'm not really sure how to write styles that check a users scale in a way that it is able to know if its 125%, 170% etc etc. All hints/tips appreciated....

How to vertically center a horizontal line to the first line of a multiline paragraph using CSS?

I have a layout where I need to position a horizontal line next to a multiline paragraph. The line should be vertically centered to the first line of the paragraph, not to the entire paragraph. How can I adjust the CSS to achieve this alignment? Here is the HTML and CSS code I have so far: https://jsfiddle.net/pmcdq1hr/1/...

overflow scroll issue during transition in framer-motion

i post the video of my project in comment of these posts i set overflow hidden and it works but i cant scroll on projects section which needs scroll but i try overflow auto for only project.jsx but it doesnt work cuz i set overflow hidden on body on other components , if i set overflow hidden on certain div it doesnt work for now i only sent the framer motion animation code .. code :...

Nav issue

Problem: I'm trying to make nav bar the same as index.html, but it seems to be stagnant. What I've tried: Copying and pasting the nav from index.html into booking.html and it barely worked. Error Message: N/A...

Issue with making appointment form larger.

Problem: My appointment form isn't getting any larger, it stays the same. What I've tried: I've tried padding, padding-top, and padding-bottom. Error Messages: N/A...

Hello CSS diplay:grid gods!

How do I make these 2 buttons at the bottom occupy the same row: https://codepen.io/Hristo-Stoyanov-the-solid/pen/PorWpKM Note: this works if i do this: ```css...