Dennis
Dennis
PostsComments
KPCKevin Powell - Community
Created by Dennis on 7/1/2024 in #front-end
Suggestions on how to correctly handle 2 scrollable items on mobile
Somebody else suggested I made a toggle for map interactibility and only show it if the device is capable of touchscreen so thats the route I took. Thank you! 
let isTouchscreen = false
try {
    document.createEvent("TouchEvent")
    isTouchscreen = true
} catch(e) {
    isTouchscreen = false
}
let isTouchscreen = false
try {
    document.createEvent("TouchEvent")
    isTouchscreen = true
} catch(e) {
    isTouchscreen = false
}
4 replies
KPCKevin Powell - Community
Created by Dennis on 7/1/2024 in #front-end
Suggestions on how to correctly handle 2 scrollable items on mobile
Hello just would like to bump this as I'm still not sure of a clean way to handle this
4 replies
KPCKevin Powell - Community
Created by Dennis on 6/26/2024 in #front-end
Parent container with child elements position: absolute does not size properly to fit the children
Ah alright no worries I really appreciate your help!
15 replies
KPCKevin Powell - Community
Created by Dennis on 6/26/2024 in #front-end
Parent container with child elements position: absolute does not size properly to fit the children
doesnt seem to do it
15 replies
KPCKevin Powell - Community
Created by Dennis on 6/26/2024 in #front-end
Parent container with child elements position: absolute does not size properly to fit the children
No description
15 replies
KPCKevin Powell - Community
Created by Dennis on 6/26/2024 in #front-end
Parent container with child elements position: absolute does not size properly to fit the children
https://codepen.io/dennis777-the-builder/pen/PovLMRe
15 replies
KPCKevin Powell - Community
Created by Dennis on 6/26/2024 in #front-end
Parent container with child elements position: absolute does not size properly to fit the children
Okay sorry. Had to set up a codepen and get the layout working
15 replies
KPCKevin Powell - Community
Created by Dennis on 6/26/2024 in #front-end
Parent container with child elements position: absolute does not size properly to fit the children
Theres a gap the same size as the child element between the two children idk why
15 replies
KPCKevin Powell - Community
Created by Dennis on 6/26/2024 in #front-end
Parent container with child elements position: absolute does not size properly to fit the children
Ends up looking like this when i update my css to this: 
.paginatedContainer {
    border: 1px solid rgba(158, 158, 158, 0.3);
    height: 76px;
    width: min(calc(75vw + 20px), 1270px);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 2px 2px 4px rgba(56, 56, 56, 0.6), -2px -2px 4px rgba(56, 56, 56, 0.6);
    border-radius: 10px;
    padding: 10px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
}

.first, .second {
    text-align: center;
    padding: 1rem;
}
.paginatedContainer {
    border: 1px solid rgba(158, 158, 158, 0.3);
    height: 76px;
    width: min(calc(75vw + 20px), 1270px);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 2px 2px 4px rgba(56, 56, 56, 0.6), -2px -2px 4px rgba(56, 56, 56, 0.6);
    border-radius: 10px;
    padding: 10px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
}

.first, .second {
    text-align: center;
    padding: 1rem;
}
15 replies
KPCKevin Powell - Community
Created by Dennis on 6/26/2024 in #front-end
Parent container with child elements position: absolute does not size properly to fit the children
Well as shown in the video when i do that they lock into some 612px width and I cannot change it no matter what. Setting width: 100%, width: 200%, width: 1000px, width: 1000000px nothing changes it unless its less than that magical 624px or whatever it is.
15 replies
KPCKevin Powell - Community
Created by Dennis on 3/29/2024 in #front-end
How can I stack a div on top of my main content without it rendering extra space on the bottom?
Final result:
6 replies
KPCKevin Powell - Community
Created by Dennis on 3/29/2024 in #front-end
How can I stack a div on top of my main content without it rendering extra space on the bottom?
Hi kevin! Pleasure seeing you. That does fix the issue. How can I align it to the center? of the screen Update: I got it, just made the width 100% and that fixed it
6 replies
KPCKevin Powell - Community
Created by Dennis on 3/29/2024 in #front-end
How can I stack a div on top of my main content without it rendering extra space on the bottom?
That was one of the things I tried but I still get that annoying space on the bottom (as big as my floating bar is) 
<div className="flex items-center justify-center text-center text-3xl font-giest-ultralight bg-slate-700" style={{ width: "100vw", height: "100vh" }}>Some content</div>
<div className="sticky bg-slate-900 text-xl font-giest-semibold" style={{ bottom: "5rem" }}>Bottom bar</div>
<div className="flex items-center justify-center text-center text-3xl font-giest-ultralight bg-slate-700" style={{ width: "100vw", height: "100vh" }}>Some content</div>
<div className="sticky bg-slate-900 text-xl font-giest-semibold" style={{ bottom: "5rem" }}>Bottom bar</div>
6 replies