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

does anyone know CSS grid well?

I am trying to arrange my project using the CSS grid , but I am failing miserably ! The first image is how I wanted it to be , and the second is my image , I can share the code via dm , can't share here , please if you know grid , help me out... #front-end...
No description

How to make 1 row with columns that are resizable in width by the users?

Here are some criteria to help you understand what I want. A layout with 1 row and X number of columns. The initial width of the columns should be based on its content. The user should be able to resize the widths of the columns. All columns have a min-width that should be respected....
No description

Container Queries in Grid environment

I know that you need to add a wrapper to grid items that is the container for an item to adapt to the track size of a grid when using container queries. I’m wondering if anyone knows of any methods to avoid needing to add this containing element and use the track itself as the container?
I’m not hopefully but wondering if anyone knows of something I’ve not seen before....

I was to have a dialog automatically show up over my hero section (i.e. announcement).

What's it called? And does Kevin have a video on it? Or maybe point me to some examples. Thanks Phil...

findIndex()

can anyone explain findIndex in js how is the workflow in brief.

Need Help Creating a Dynamic Mega Menu in Angular

Hey everyone, I’m looking to create a dynamic mega menu using Angular, and I'm a bit confused about how to approach the styling and structure. Specifically, I want the navigation links to be dynamic, so that an admin can decide whether a link is a regular navigation link, a part of the mega menu, or a standalone menu item. If a link doesn’t have any content, it should simply function as a regular navigation link that directs the user to a specific page. Could anyone provide some guidance or share examples of how to build this kind of dynamic mega menu in Angular? Any tips or code samples would be greatly appreciated!...

How should i make it?

hello there i have this design by default text collapsed when icon get clicked its getting bigger with scrollbar if needed i have couple big questions: 1) idk how to make it better with grid/flex? and just left some space or even use pos relative...
No description

How would you approach and structure this input in an accessible way?

Hi everyone, hope you're doing well! 🙂 I'm struggling to find a good way to structure this input, which is a dropdown but it also has a searchbar in it. I've thougth of different ways to structure it, taking in accout keyboard navigation and screen readers. It's part of a search form, where there are other two inputs like this and they are consecutives (what I mean is that you cannot open the second and the third if you didn't select an option from the first one, and so on for the other two)...
No description

want to design copy to clipboard functionality works everywhere except on apple products.

Summary: I'm trying to use navigator.clipboard.writeText(message) inbuilt function of JS, This works fine on all devices except mac. I've asked all my colleagues who have apple devices and when they try to use copyToClipboard it does nothing nor shows any error. In baseline it shows navigator.clipboard is universally acceptable function. Information:...

Nth instance of a has selector

I have a table with a class of table. I also have some table rows (tr) that have a header (th) that has a row span. I am trying to have alternating stripes on the tr’s that have a th child. ```html <table class="table"> <thead>...

How exactly can we replicate the animation in this video?

I have a few options to create animations using Intersection Observer and ScrollMagic. Can anyone help me determine which approach is the best and most optimized for achieving these animations i have the assets with me the scroll animation itself I'm confused. I appreciate any help you can provide.

Classlist toggle

hey guys, can anyone help me out on making this button toogle my nav list, and explain how it works, thanks https://codepen.io/Adhurim-Gashi/pen/NWZLRaO...

Jagged Edges on CSS Translated + Rotated Button

Background Hi everyone, not sure how to fix this with CSS but it seems translated and rotated buttons still have a "jagged" edge which means there isnt any or enough anti-aliasing done. Using edge/chromium (technically webview2 on windows) ...
No description

Headings: Is “Preparation time” a `<h2>`?

I don't know. Judging just by the plain text, it could be, but the way it's presented makes me think it's not intended as such. I wish I could ask the author/designer what they had in mind. Maybe there's no right answer here(?) If a 'heading' is just a title/short-description for the content that is grouped with, then yes, but according to my understanding, headings should be reserved for major sections of the content that would make sense to include in a table of contents, not just any thematic group; although what someone would consider “major” enough to be included in a table of contents is somewhat subjective. If it's not a heading, then I think It would make sense to mark it as a <figcaption> wrap in a <figure>. Communicating “preparation time” is a description for this piece of content, without specifying that it should be in a table of contents....
No description

Change the order of <Form> elements

I'm working with a wordpress site, and don't have much control over the elements in a form, except, I can wrap an element or group of elements in a div, and can set the classes and id's of the elements. Some of the input elements are grouped inline, and some block. I want to move an element from it's rendered position to be coming between other elements later in the form....

SVG border Issue

I have the SVG apply button used inside all the tabs, but on 1st tab the SVG apply button is working fine, on other tabs SVG apply btn border is changing, anyone know what could be the issue? here is the code pen demo - https://codepen.io/aldrinbright/pen/gONjBBY...
No description

how to style for long text

Hi guys, how can I style for this text drop to a new line or truncate the text? because i'm creating an email template so a lot of properties is not suopported. ```css // this does not work .truncate{ white-space: nowrap;...
No description

Don't expand auto-sized grid column?

I'm trying to get a behavior where hovering over an item adds a button inside (in reality it's a table cell, placed inside a CSS Grid for the whole table), without causing the cell to expand, but rather have the inner text truncate to accommodate the newly added button. All of this, without setting a hardcoded width (or similar) on .two, of course - since that defeats the purpose. This is my current state of things - when hovering/tabbing into button.two, the .badge should not increase .two's size in the grid, but rather have "Two Hundred" (.text.truncate) to truncate:...

Is there a way to make the text wrap around the picture in this grid layout?

Hi, I got inspired by Kevin to try to use grid more! I was wondering if it was possible to wrap the text around the picture in this grid setup (as float is not respected on a grid item)
No description

Is there a vite-plugin for compiling -webkit rules in sass?

So I'm trying to solve an issue where I'm using "backdrop-filter" in my sass which works fine in Chrome but doesn't work in Safari. So if I do it the old-school way and add -webkit-backdrop-filter below it works fine. So I'm wondering if there's a watch/build plugin for vite that automatically adds those webkit prefixes so I don't have to add them in my sass?