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

Scrolling bar in a <Table> with "responsive" columns

I'm trying to design a table with a scroll bar. The problem is that the columns don't adjust according to the information contained in the scrollbar. All the columns keep the same proportion because of the scrollbar located in <tbody>. I therefore used Typescript code to modify the width of each column according to its content. It works fine, but the alignment of columns and values is not good. What's more, the scroll bar is inside the last column and alters the style of the buttons contained in the cells. ...

Form status message

Hey, What is the best practice to keep one's div size without allowing to interact with the content of it? My idea is to keep the form's panel the same size as it is and display sending message with some spinner on it. I was thinking about just reducing opacity of form to zero but then the inputs would be still available to users and seems like a bit of a unclean hack. Any ideas for cleaner solution?...
No description

Positioning Issues

Hey, I'm trying to make a mockup of a metro interface. i'm trying to do it with flex and keep it simple, but i just can't g et it right. I don't know what i'm doing wrong with the centering and whatnot, though i'd really appreciate some help! https://codepen.io/Yanni-Eleftheriou/pen/mydVOZy...
No description

Having hard time making Image fits the height | not easy as you think

Hi, whithout futher ado I'm working on an Angular Project, explaining my problem: I have a parent component called choose-role and I have two children left and side components each one will take 50% of the page and then I will call them both on the parent comp. The right side has a form & the left side will show an image ...
No description

view-transition exclude navbar issue

Hey, i am playing around with view-transition in CSS and i cannot really figure out this problem, when i use view-transition-name: nav; on my nav selector. nothing is being animated anymore when i click my links. But works just fine if i comment out this line... This is the code i have ```css @view-transition {...

Why not working?

Hello, I am wondering why this is not working? https://codepen.io/lanszelot/pen/qEBOGYQ...

SCSS 7-1 Pattern: Issues w/ User Agent Overrides, Circular Dependencies, & PurgeCSS Remov Normalize

Hello everyone! I’m working on an SCSS project using the 7-1 pattern, and I’ve run into a few issues that I’d love some help with. I’ll try to keep it concise, but I’ve included details and links to make it easier to understand. 1. User Agent Stylesheet Overriding My Resets For some reason, the user agent stylesheet is overriding my resets (like margin) and body styles (e.g., font-size, etc.)....
No description

Weird anchor tag behaviour

can anyone explain me why this issue is occuring ??? even after setting background-repeat the img is somehow repeating whernhover over it where i just want to change the color from white to a linear-gradient

Why does the eventListener just works on the first occasion?

So from what I know, however many times I trigger the eventListener, it will always fire an event. Why does my eventListener does not do this? It doesn't even listen for it twice, but I have not set the option
element.addEventListener('click', () => {},{once: true})
element.addEventListener('click', () => {},{once: true})
...

Pop up help

I want to do something so that if you accept the 'Accept Cookies' button, then the popup won't show up again if you refresh the page. But if you reject it, then it will keep appearing. I think I have to use local storage for that. How can I do so? https://codepen.io/saad-shehzad-the-bashful/pen/YPzyLmJ...

Need help to add images to HTML

<!DOCTYPE html> <body> <img src="mainpage.jpg"> <img src="secondpage.jpg">...

Grid/Flex positioning - Image Grid?

It's basically there, but for some reason I have a lot of space on the right, but no space on the left? ```js <template> <div class="shopImages">...
No description

background-image file path using Sass

Hello, I have a question about image file paths with the background-image CSS property using Sass. Locally, this file path works: 
background-image: url(‘/img/chicago-500.webp’);
background-image: url(‘/img/chicago-500.webp’);
...

Fixing Sticky Table Header with Horizontal Scroll Issue

I have a fixed menu on the left side of the viewport, which takes up the full height, and on the left side, there's a table. The table's data loads automatically as you scroll, and it has both a header and footer. The problem I’m facing is with the table header. The header stays sticky at the top when scrolling vertically, but when I try to add horizontal scrolling by setting overflow-x: auto on the .content class, the sticky header is no longer fixed at the top. How can I solve this issue and make the header sticky while still allowing for horizontal scrolling?...

Profile Picture Upload semicircle Input

https://codepen.io/ahmd_shajmeer/pen/GgRprYM I was trying to achieve the design from the image for user profile upload input , but the upload-btn is not getting the semicircle shape that matches with profile container radius....
No description

How do you see this can be implemented

for me i see a grid but too much seperators and other stuff, idk if it's only doeable in grid or not
No description

Adding a Hyperlink to a Nested Accordion Menu

Hello. I have a complex Information Architecture (IA), and have decided to use the following Nested Accordion menu... (Need to tewak it to make it accessible) https://codyhouse.co/demo/multi-level-accordion-menu/index.html (I have played around with this on my iPhone, and think it is a super easy way to navigate a lot of information.)...

🫨 Fix my crazy blur lags | Advanced

You guys know i love CSS only stuff, this time i wanted to focus on scroll animations, i want to recreate an image i found online and make it interactive The problem is, blur :D given the bubble gets rescaled during the animation quite heavily, it feels like it's trying to rerender the blurred segments every frame that makes it do crazy lags. https://codepen.io/Cubiq/pen/VworQqO?editors=0100...
No description

Maintainability and Alignment

I have two concerns for an exercise I’m working on here: https://codepen.io/Mcoding-300/pen/MYWwqQe note: some borders are included to see spacing/placement* 1) Is there a way I could have more control of how close my paragraph element (product description) is to my h3 element? I would like if there wasn’t so much space between them and that I could adjust it to taste. I don’t think I could even move the h3 anywhere if I tried either. ...

border ui issue

Do anyone know why the border edge curve have some like black pixel I don't know how to explain it , look at that image I marked.. Is it normal or my laptop has issues ? I use border:1px solid black; ...
No description
Next