o_O Posts - Answer Overflow

o_O

Explore posts from servers

DIAdiscord.js - Imagine an app KPCKevin Powell - Community TTCTheo's Typesafe Cult

Posts Comments

KPCKevin Powell - Community

•Created by o_O on 7/4/2024 in #ui-ux

What's this style called and how can I implement in a website?

7 replies

KPCKevin Powell - Community

•Created by o_O on 6/26/2024 in #front-end

How can I make the handle which resizes content bigger. It's too small.

39 replies

KPCKevin Powell - Community

•Created by o_O on 6/26/2024 in #ui-ux

Need to show 3 cards but want to do something different and unique. Any ideas?

18 replies

KPCKevin Powell - Community

•Created by o_O on 6/10/2024 in #ui-ux

what's that font that looks like it was drawn on a digital canvas?

17 replies

KPCKevin Powell - Community

•Created by o_O on 6/6/2024 in #front-end

Setting radial bg but the radial parts are stretching with the page height. Don't want that

4 replies

KPCKevin Powell - Community

•Created by o_O on 6/3/2024 in #ui-ux

How do I make a single column table look good?

35 replies

KPCKevin Powell - Community

•Created by o_O on 6/1/2024 in #front-end

3 Cards 1 row where the center card is 1.5 times the size of the 1st and 3rd card.

21 replies

KPCKevin Powell - Community

•Created by o_O on 4/3/2024 in #front-end

Doing responsive text by using media queries on :root to change the font size for smaller screens.

While trying to figure out a good way to do responsive text without manually setting font size using each media queries, I came up with an approach. I'll use rem everywhere for font-size and then use media queries on my html tag to change the size of root. This way I can control the breakpoints from one place which is something I've been struggling with.

html {
        @media screen and (min-width: 100px) { font-size: 1px; }
        @media screen and (min-width: 640px) { font-size: 10px; }
        @media screen and (min-width: 1024px) { font-size: 16px; }
        @media screen and (min-width: 1280px) { font-size: 20px; }
}

html {
        @media screen and (min-width: 100px) { font-size: 1px; }
        @media screen and (min-width: 640px) { font-size: 10px; }
        @media screen and (min-width: 1024px) { font-size: 16px; }
        @media screen and (min-width: 1280px) { font-size: 20px; }
}

Is this a good or a terrible idea? I can quickly change font-size and breakpoints of the entire app from one place instead of going to every place and change the rem value for font, which is pain to do. Edit: shoul've used rem instead of px inside media queries.

21 replies

KPCKevin Powell - Community

•Created by o_O on 3/30/2024 in #front-end

Grid is expanding to fit the image. want grid to only expand to fit the content and image to shrnk.

<div
    key={i}
    className="grid grid-cols-3"
>
    <p> {data.description} </p>
    <div>
        <img
            src={imagePaths[i]}
            className={ 'w-full' }
        />
    </div>
</div>

<div
    key={i}
    className="grid grid-cols-3"
>
    <p> {data.description} </p>
    <div>
        <img
            src={imagePaths[i]}
            className={ 'w-full' }
        />
    </div>
</div>

the grid row would expand to fit the image but I'd rather expand it to only fit the content. Basically I don't want the row height to depend on the image.

2 replies

KPCKevin Powell - Community

•Created by o_O on 3/28/2024 in #front-end

Is setting height as bad as people like kevin say or is it exaggeration? what about aspect-ratio?

3:28 kevin suggested not to use height. He also says that in some of his other videos and I've also heard it from other people. 1. Does this apply to aspect ratio since it's also setting height? 2. What about when I use height: 100% on my <img/>? should I stop doing that? 3. What if I set height with rem or em units? Is that still a no-no? 4. If I had a <table/ which was pushing all the contents bellow to a mile away and I wrapped the table in a <div style={{ height: 50vh, scrollY: 'scroll' }}>, would that be an 'ok' case to use height?

33 replies

KPCKevin Powell - Community

•Created by o_O on 3/26/2024 in #front-end

How do I apply padding to all but one div so it is full width while other divs have breathing room.

I want to give breathing room to all elements on my page by just putting padding on the container. But there is a single item that acts as a breakout content. I want to negate the padding on that single item only. Negative padding is not a thing aparently, what's my next best option?

<main style={{ paddingInline: '20rem' }}>
    <div></div>
    <div></div>
    <breakout> I should not have paddingInline </breakout>
    <div></div>
    <div></div>
</main>

<main style={{ paddingInline: '20rem' }}>
    <div></div>
    <div></div>
    <breakout> I should not have paddingInline </breakout>
    <div></div>
    <div></div>
</main>

The only solution I could think of was creating a custom div element divWithPadding and then use it everywhere in my jsx. Just had a 💡 moment. Maybe... just maybe I can use max width instead of padding. I'll give it a shot but in the meantime if someone has any other idea let me know.

4 replies

KPCKevin Powell - Community

•Created by o_O on 3/24/2024 in #front-end

I want my div (table) to take the entire remaining height of the screen without overflowing.

<div>unknown height</div>
<div>should take all remaining vertical space</div>

<div>unknown height</div>
<div>should take all remaining vertical space</div>

If it matters, I am using JS with tailwind. Another thing to note is that the second div is a table. The closest solution I could find was this article that sugestes absolute position. However, this requires me to know the top or height of the table, which I don't know.

2 replies

KPCKevin Powell - Community

•Created by o_O on 3/11/2024 in #front-end

How do I implement this gradient?

4 replies

KPCKevin Powell - Community

•Created by o_O on 2/17/2024 in #front-end

Is it possible to animate components based on layout changes as opposed to change in CSS value?

My flex container has two flex item. I am hiding the left flex item on the click event but when this happens, I would like the right component to animate when it takes the entire space of the flex container. Right now, it just snaps into place instead of doing an expanding animation.

<Box sx={{ display: 'flex', border: 'solid red 3px', width: '100%' }}>

    {areSettingsVisible && <Box sx={{ width: '100%', backgroundColor: 'blue' }}> hello</Box>}

    <Box sx={{ width: '100%', backgroundColor: 'red', transition: 'all 2s' }}> hi</Box>

</Box>

<Box sx={{ display: 'flex', border: 'solid red 3px', width: '100%' }}>

    {areSettingsVisible && <Box sx={{ width: '100%', backgroundColor: 'blue' }}> hello</Box>}

    <Box sx={{ width: '100%', backgroundColor: 'red', transition: 'all 2s' }}> hi</Box>

</Box>

In a way, because left components got yanked form the DOM, the right component should animate because the layout has changed but CSS values remain the same for the right component.

6 replies

KPCKevin Powell - Community

•Created by o_O on 12/30/2023 in #front-end

relative width not working while animating div collapse using MUI's transition API

I have an input bar that can collapse and expand on onClick but the issue is that it's not expending entirely in a single go. As you can see in the video, the element expands, stops, then expands completely.

<ButtonGroup
    sx={{
        justifyContent: 'flex-end',
        alignItems: 'center',
    }}
>
    <Collapse
        in={searchFieldVisible}
        timeout={{ enter: 1000, exit: 1000 }}
        orientation='horizontal'
    >
        <TextField/>
    </Collapse>

    <IconButton onClick={() => setSearchFieldVisible(p => !p)}>
        <SearchIcon />
    </IconButton>

</ButtonGroup>

<ButtonGroup
    sx={{
        justifyContent: 'flex-end',
        alignItems: 'center',
    }}
>
    <Collapse
        in={searchFieldVisible}
        timeout={{ enter: 1000, exit: 1000 }}
        orientation='horizontal'
    >
        <TextField/>
    </Collapse>

    <IconButton onClick={() => setSearchFieldVisible(p => !p)}>
        <SearchIcon />
    </IconButton>

</ButtonGroup>

I am using MUI's transition API . If I set width: '200px' on the <TextFied sx={{ width: '200px' }} /> it works, however, setting relative width doesn't work i.e. <TextField sx={{ width: '80%' }} />

3 replies

Gaming

Programming