Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Strange behaviour cellAlign. Sometime works correctly, other times no. #1309

Open
gipic opened this issue Aug 3, 2024 · 0 comments
Open

Strange behaviour cellAlign. Sometime works correctly, other times no. #1309

gipic opened this issue Aug 3, 2024 · 0 comments

Comments

@gipic
Copy link

gipic commented Aug 3, 2024 •
edited
Loading

img1
img2
img3

Hi, I am new to this library and I think this is awesome.
I don't know if I miss something but I found a strange behaviour using cellAlign: left (default).
Sometimes the cell is not completely aligned on left like in img1 and img2.
If I open the Inspector, then it works correctly, even if I close it.
But if I refresh the page, it returns to render incorrectly.
I tried on different PC, browsers, even on my friend's PC.
Is this normal?

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

    <style>
        * {
            box-sizing: border-box;
        }

        .main-carousel {
            border: 1px solid red;
        }

        .carousel-cell {
            border: 1px solid green;
            height: 250px;
            width: 250px;
        }
    </style>
</head>

<body>
    <div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
        <div class="carousel-cell" style="border:1px solid green">Elemento 1</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 2</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 3</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 4</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 5</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 6</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 7</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 8</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 9</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 10</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 11</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 12</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 13</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 14</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 15</div>
    </div>

    <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

    <script>

    </script>
</body>

</html>
@gipic gipic changed the title Strange behaviour cellAlign. Somethime works correctly, other times no. Strange behaviour cellAlign. Sometime works correctly, other times no. Aug 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@gipic