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

help

Improve and question about Grid

Is the current grid layout okay, or are there ways to improve it? Additionally, if two cards are placed next to each other and a third one below them, is it possible to center the third element? https://codepen.io/Redcaus12345/pen/qEBaKor

Asking for improvements

I have built this component and I really wanna know what will you do if you were in my place regarding these tall inputs I see that they look good on 1024px screens(would love to hear your though on this too) but on 1440px screens they look way big hahaha here's a link to a video to see how fields looks on screens I mentioned: https://streamable.com/ee6x7f what's your suggestions ?...

Anchor tag is clickable past it's visual width

Need some help figuring out why this anchor tag is clickable outside the width you see here. In this grid container, the anchor tag is clickable in this entire 1 to 2 section. Even though, as you can see, the width of the anchor doesn't span that whole section. ```javascript <Link href="/"> <div className="w-fit flex items-center"> <Logo />...
No description

CSS max-height property ignored by wrapper element

<div id="slide-table-wrapper">
<mat-table #slideTable class="fixed-height">
...
<div id="slide-table-wrapper">
<mat-table #slideTable class="fixed-height">
...
```scss...
No description

Implementing a Custom Modal for Unsaved Changes on Page Refresh

I am trying to notify user their changes will be lost on refresh when they click browser refresh. but I am not able to do it with custom modal. is it possible to use custom modal instead of broswer's default popup. shared brower's default popup.
No description

Hiding an element when other elements set to display:none

https://codepen.io/peterchanning/pen/XJWKPNO Please see the above codepen This all works great, select the dropdown for fruits and it filters the divs to only show ones that contain the fruits and desserts that contain the fruit. ...

can't align the elements

https://codepen.io/etrbbr/pen/RNwRQzE try to write some text and you will see I can't align the elements. Look at the screenshot – at the end, they are either longer or larger, depending on the values at the end. any tips what i am doing wrong?...
No description

why these cards in flex seem to be not in the same height

idk if you can spot it but here the second element looks a bit big https://pastecord.com/otanylyjaw.html ...
No description

Reproduce flex behaviour with grid

Hello, I've just found out this pen: https://codepen.io/RamSande/pen/ebNYJP and I wanted to try to replicate it using grid, I tried
display: grid;
grid-template-columns: repeat(5, minmax(100px, auto));
display: grid;
grid-template-columns: repeat(5, minmax(100px, auto));
But this doesn't make the last elements occupy the whole content, is it possible to do that with grid? I also tried 1fr but it doesn't work as I want...

weird shift and zoom of page when inspecting it

Hey folks can anyone check this code out https://stackblitz.com/edit/vitejs-vite-pcp8adlj?file=src%2FApp.tsx when I inspect the page there is weird shift and zoom in the page I have attached image of page with and without inspecting it...
No description

Javascript React ?

Hello everyone , I am new to javascript and I decided to start with react because I want to make a website that is 1 page and without loading between sections , do I have to make the whole website in javascript then or can I just have multiple html files and use react to switch between them or prefetch them in some way ? thank you in advance for taking your time to answer , best regards

Is rotating a radial gradient in CSS background property possible?

Is it possible to use a gradient to create an ellipse and make it look like a rotated ellipse? It's easy to create an ellipse with radial-gradient, but I'm wondering whether this can be rotated in any angle. Why do I need it? I can draw images pixel by pixel with linear-gradients, but if I want an elliptical shape, that's not on the horizontal or vertical axis, it looks like doing so seems impossible to me if I don't want to draw them more or less pixel by pixel... But maybe I just couldn't co...

why can't an flex-item just get the height of the flex-container until specifically added

soo i have a flex container with items & i want to set the parent container to be min-height:24rem & the flex-item's height be height 100% but it doesn't do anything until i manually set the height on the parent one solution is to keep inheriting from parent to childrent like ...

CDL's weekly question! - Positioning of Card items

https://codepen.io/Laing91/pen/raNeyPO I'm trying to achieve the second image, where title is at the top, slightly below it is a brief description of the project, and then at the bottom is the "footer" (skills used, and links). I'm almost there in achieving this, but perhaps there's an easier way I'm not thinking of?...
No description

How do I change the label color of this disabled component using css only?

I tried using .ui-select-container[disabled] + label{ color: red } but that didnt work.

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 {...