Blank space plus trimSnaps not scrolling

[brunoggdev]

Hi! I'm building this mobile-first view with react and CSS Grid but trying to use this awesome library to do so isn't working.

I have the following JSX:
(embla__slides are generated through a map function but hard-coding it doesn't affect the output and simplifies for this demo)

<div className="main" ref={emblaRef}>
    <div className="embla__container">
        <div className="embla__slide">SLIDE 1</div>
        <div className="embla__slide">SLIDE 2</div>
        <div className="embla__slide">SLIDE 3</div>
    </div>
</div>

And this is my current CSS:

.main{
    background-color: var(--secondary);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.embla__container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100vw;
    height: 100%;
    align-items: center;
}

.embla__slide{
    display: grid;
    grid-template-rows: 10% auto 20% fit-content(20%) 12%;
    background-color: var(--primary);
    width: 75%;
    height: 90%;
    padding: 10px 20px;
    margin: 0 20px;
    border-radius: 10px;
    font-size: 16px;
}

The problem is that I get a blank space at the beginning the size of one of the columns and the last column is never able to be scrolled to.
I tried to add the {containScroll: 'trimSnaps'} and it kinda solves it, but the margin gets a liiitle too thin on the left side and I surely can work on that, the real problem is that it doesn't even scrolls anymore.

Am I missing something? Does anyone have any suggestions? I'd really appreciate any help :)

Here's some short videos showing more of each case:

without.trimsnaps.mp4

with.trimsnaps.mp4

[davidjerleke]

Hi @brunoggdev,

Please create a CodeSandbox with your setup that demonstrates the problem. Your initial description isn’t clear to me, I don’t have anything but a little JSX snippet to debug so it could be literally anything causing the problems.

Best,
David

[brunoggdev]

Hi, any thoughts on it? Sorry if it sounds like I'm demanding an answer, it is really not the case.

Best,
Bruno.

[davidjerleke]

Hi @brunoggdev,

I’ve not been able to look into this yet. There are other issues on my list that was created before this and need addressing first.

I can’t be 100% sure before checking your CodeSandbox out but these kind of problems is usually caused by an incorrect CSS setup. The first thing one should do is to disable the Embla script entirely and see if the blank space is still present. If so, you have to get the CSS right. Only set slide widths and gaps between slides with your CSS, don’t align them inside the container. The slides inside the container should be aligned to the left and you should let Embla do the aligning.

Best,
David

[brunoggdev]

Thank you so much for your attention, I'll try your tips and let you know any results. Keep up the great work!

Cheers,
Bruno.

[brunoggdev]

Hello, just to update you, I was able to make it work thanks to your tip, the problem was indeed aligning it within the container. Thank you sooo much for the attention and patience, I really appreciate that, thank you!

Cheers,
Bruno.

[davidjerleke]

Hi @brunoggdev,

I was going to check your CodeSandbox out in a couple of hours but no need then. I'm glad you found the culprit and thanks for letting me know 👍. Please mark my comment as the answer if you think it helped you solve the problem.

Cheers,
David