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.

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

children still given random position with scatterRandomly=false #14

Open
sbauch opened this issue Mar 3, 2021 · 1 comment
Open

children still given random position with scatterRandomly=false #14

sbauch opened this issue Mar 3, 2021 · 1 comment

Comments

@sbauch
Copy link

sbauch commented Mar 3, 2021

Perhaps I'm misunderstanding the prop or the goals of this library, but I'm looking to add marquee scroll to a horizontal list of items.

          <Marquee
            velocity={30}
            minScale={1}
            maxScale={1}
            scatterRandomly={false}
          >
            {customSortedIDPs(providers).map((provider) => (
              <div key={provider.value} className={styles.providerContainer}>
                <img
                  src={provider.iconUrl}
                  className={styles.providerLogo}
                  alt={provider.label}
                />
              </div>
            ))}
          </Marquee>

But, based on these few lines, it seems like the y positioning is still randomized?

          setChildrenPosition((state) => [
            ...state,
            {
              x: randomIntFromInterval(0, containerSize.width),
              y: randomIntFromInterval(0, containerSize.height),
            },
          ]);

https://github.com/mxmzb/react-marquee-slider/blob/master/src/Marquee.tsx#L140-L146

The result is that a couple of my child elements are at random y positions, while I want them to all be aligned as they are without the Marquee.

before:

Screen Shot 2021-03-03 at 10 42 45 AM

with marquee

Screen Shot 2021-03-03 at 10 43 00 AM

Am I misunderstanding something here?

I've got this on a deploy preview here -https://603fb29b59591d0008953720--osso.netlify.app/

Interestingly the other place I use this further down the page doesnt have the same issue, so perhaps this is an error in userland, but i cant track it down.

@sbauch
Copy link
Author

sbauch commented Mar 4, 2021

I was able to solve this by targeting the created divs with css and using flex. super unclear 🤷‍♂️

.parent > div > div {
  display: flex;
  justify-content: space-evenly;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant