Dennis Posts - Answer Overflow

Dennis

•Created by Dennis on 7/1/2024 in #front-end

Suggestions on how to correctly handle 2 scrollable items on mobile

I have a main webpage that scrolls like any other website would but on one of my pages I have a full screen interactive map. On desktop this you must click and drag to get around the map. As soon as you scroll you just scroll up or down like normal and kep going down the website. However on mobile the same gesture is used to scroll the website and interact with the site. As soon as the scrollbar for the main website goes away, you can scroll around on the map but then you're kinda stuck unless you press one of the navigation buttons on the bottom. On desktop as you scroll on the map I move the map around and highlight some locations (same on mobile) but if lets say you scroll to the first place and stop, you wont have any way to get to the other locations. Long winded story but basically my question is what is the right way to handle this or what is common practice in such cases as I have a map in my case but I'm sure this type of descision could come up with many other elements.

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

Really hard to put my thoughts into words but I have a container essentially and I have two h3's inside of it which I want to paginate. I have it working as I want but only when I explicitly tell the container its height and width. I understand its behavior because position absolute pulls it out of the flow but that means without explicit width and height my container is a tiny blob. This impacts my reactiveness of the website as when the width of the device increases or decreases text starts to overflow instead of the container adapting to fit the content If I remove position absolute and try to explicitly set the width of the child it doesn't work (I try set 1200px) css:

.paginatedContainer {
    /* border: 1px solid blue; */
    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: flex;
    align-items: center;
    justify-content: center;
}

.first, .second {
    text-align: center;
    /* width: 600px; */
    position: absolute;
    padding: 0 1rem;
}

.paginatedContainer {
    /* border: 1px solid blue; */
    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: flex;
    align-items: center;
    justify-content: center;
}

.first, .second {
    text-align: center;
    /* width: 600px; */
    position: absolute;
    padding: 0 1rem;
}

html react component (You can provide Vanilla JS solution I can convert)

<>
    <div className="paginatedContainer animatable disable-select">
        <h3 className="first text-xl text-primary font-giest-regular">
            {"Some long text"}
            <span className="animatedUnderline">Tacoma</span>
            {"Some more long text"}
        </h3>
        <h3 className="second text-xl text-primary font-giest-regular">
            {"More long text"}
            <span className="animatedUnderline">Seattle</span>
            {" and "}
            <span className="animatedUnderline">Tacoma</span>
            {"More long text"}
        </h3>
    </div>
</>

<>
    <div className="paginatedContainer animatable disable-select">
        <h3 className="first text-xl text-primary font-giest-regular">
            {"Some long text"}
            <span className="animatedUnderline">Tacoma</span>
            {"Some more long text"}
        </h3>
        <h3 className="second text-xl text-primary font-giest-regular">
            {"More long text"}
            <span className="animatedUnderline">Seattle</span>
            {" and "}
            <span className="animatedUnderline">Tacoma</span>
            {"More long text"}
        </h3>
    </div>
</>

Let me know if you need any more information

15 replies

KPCKevin Powell - Community

•Created by Dennis on 4/2/2024 in #ui-ux

What's a modern simple logical layout I can use for the main logo?

I'm working on a website for my dads business and I just want to keep it really clean and modern. There is almost no functionality to the website its just displaying information (interactive map, probably will add some conact form, etc) I think I'm happy with my landing page, the still image will be replaced with a drone video collage that I will film when its good weather but I'm mainly stuck on what to do with the logo/title of the landing page. It feels out of place up there when I scroll. Any suggestions welcome 🙂

3 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?

6 replies

Gaming

Programming