Psyzen Comments - Answer Overflow

Never mind sorry for pinging the only thing it masked the issue while the scroll bar is "fixed" I realized the content size changes it gets bigger for some reason.

12 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/18/2024 in #front-end

Scrollbar margin disappears ?

Or this is the issue entirely different and a result of overusing min-content and max-content on grids 😄

12 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/18/2024 in #front-end

Scrollbar margin disappears ?

AHAHAHA. What kind of shenanigans is this. @Kevin Sorry to ping you this but would really like to find out why this is happening or a video. Alright so I have container with padding of 1rem and inside container there is items container with this class:

grid
max-h-[calc(100vh-5.125rem)]
gap-4 
overflow-y-auto 
pr-4

grid
max-h-[calc(100vh-5.125rem)]
gap-4 
overflow-y-auto 
pr-4

I tried using overflow-y-auto which seems like it works but when you spam refresh page the horizontal bar appears + white corner appears + vertical padding right 1rem disappears. I would like to know why all of these things happen. My assumption is some rendering issue. And this is how I fixed it:

mr-4
grid
max-h-[calc(100vh-5.125rem)]
w-full
gap-4 
overflow-y-auto 
pr-4

mr-4
grid
max-h-[calc(100vh-5.125rem)]
w-full
gap-4 
overflow-y-auto 
pr-4

Not sure why this is working either. If I remove mr-4 or pr-4, the padding is not working anymore, nor margin. For some reason both has to be present. I thought to put it twice margin or twice padding but it didn't fix the issue. On the margin case nothing happened and on padding sometimes made it look like 1rem and sometimes 2rem. I tried to change w-full to overflow-x-hidden but the issue remain so w-full is a must too. Sorry for a long message. I am REALLY CURIOUS what is going on here.

12 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/18/2024 in #front-end

Scrollbar margin disappears ?

Alright I tried just new thing and I set x to hidden and y to auto and it seems to fix the horizontal issue tho now when I refresh there is missing margin

12 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/18/2024 in #front-end

Scrollbar margin disappears ?

Tho the behaviour is changed which is not what I wanted.

12 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/18/2024 in #front-end

Scrollbar margin disappears ?

I think I found problem. The problem is overflow-y: auto. When I changed from auto to scroll it seemed to fix the issue. If anyone know why let me know. Thanks.

12 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/18/2024 in #front-end

Scrollbar margin disappears ?

I managed to fix the color with -webkit-scrollbar-corner

12 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/11/2024 in #front-end

How to set border for second grid row ?

Thanks

4 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/11/2024 in #front-end

How to set border for second grid row ?

I am just looking for solutions to get rid of 3 containers/wrappers.

4 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/7/2024 in #front-end

A problem I find with Semantic HTML

Thanks.

54 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/7/2024 in #front-end

A problem I find with Semantic HTML

Interesting.

54 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/7/2024 in #front-end

A problem I find with Semantic HTML

So in this way we wouldn't need to worry about which tags to use rather focus on naming that both will server as class and an html tag with actual meaning.

54 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/7/2024 in #front-end

A problem I find with Semantic HTML

Why can't we just instead tag to have classes as tags so I could write <kevin>I really like your Youtube Channel.</kevin> and then we could use it as .kevin { background: lightcoral; }

54 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/7/2024 in #front-end

A problem I find with Semantic HTML

@Kevin This is exactly what I was thinking:

You'll find a few opinions on each of these things (particularly section vs article) but my point is that it's never clear cut and certainly not simple. Oh look, a dashboard has entered the chat.

54 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/7/2024 in #front-end

A problem I find with Semantic HTML

Well then sorry because I am using button for everything haha I will change to a. I know the input version is used for forms but even then should you use input vs button. Can you explaind me more where would you use button ? Is this something like a use case for dynamic js like moving object but can be clicked which makes them to be selected like an item ? So far I understand that <a> tag is for redirecting and <button> for non-redirecting dynamic styling.

54 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/7/2024 in #front-end

A problem I find with Semantic HTML

The first I think I saw is <a> vs <button> great another issue made me remember. Also why not <input type="submit" /> 🙂

54 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/7/2024 in #front-end

A problem I find with Semantic HTML

Thank you very much.

54 replies

Gaming

Programming