Large space between first and last item about react-fast-marquee HOT 17 CLOSED

Sorry @aliiip, I've been trying to find a way to repeat the children dynamically, but the problem is harder than I initially thought it would be.

from react-fast-marquee.

I've been experimenting with ways to fix this and i think i have found the problem.

setting the min-width: 100% to min-width: max-content or anything that has a similar effect solves this problem

react-fast-marquee/src/components/Marquee.scss

Line 50 in 8dd0331

min-width: 100%;

min-width: 100%

min-width: none

doing this in chrome dev tools fixes it for me but i haven't tried patching the package

This solution while somewhat effective doesn't resolve the root of the issue which is the library only clones the items once so if you render 3 items, the component will render 6 instead. Even with min-width: max-content set, if the 6 items do not fill the screen (e.g. on a 4K monitor) then it won't work and you'll have to manually duplicate your items as suggested above.

The long term solution I suppose would be to measure the width of the .marquee container, measure the width of the space the marquee exists in and use that as basis to understand how many times you must clone the items passed to the component.

from react-fast-marquee.

Fixed in 1.4.0

from react-fast-marquee.

It's most likely due to it only repeating the child components twice, so larger screens may have a gap between the last and first component. There might be a couple other bugs to that I'll fix soon.

from react-fast-marquee.

I've been experimenting with ways to fix this and i think i have found the problem.

setting the min-width: 100% to min-width: max-content or anything that has a similar effect solves this problem

min-width: 100%

min-width: none

doing this in chrome dev tools fixes it for me but i haven't tried patching the package

from react-fast-marquee.

Are there any updates/fix for this issue?

from react-fast-marquee.

At the moment, I just duplicated the children, it's not perfect but it works for now.

from react-fast-marquee.

@Luna-omni could you please set autoFill={true} and see if this fixes it?

from react-fast-marquee.

@justin-chu
oh, it works perfectly so much thanks!! 😀

from react-fast-marquee.

Can you provide your code so that I can reproduce this? I will try to fix this as soon as possible.

from react-fast-marquee.

Sure, but it's really nothing much

function OurPartners(): ReactElement {
  const classes = useStyles();

  return (
    <>
      <section className={classes.section}>
        <p className={classes.head}>
          OUR PARTNERS
        </p>
        <Marquee>
          <img
            alt="Cyberport"
            src="/images/about-logo-cyberport.png"
            className={classes.image}
          />
          <img
            className={classes.image}
            alt="Innovation and Technology Commission"
            src="/images/about-logo-innovation-and-technology-commission.png"
          />
          <img
            className={classes.image}
            alt="Invest HK"
            src="/images/about-logo-invest-hk.png"
          />
          <img
            className={classes.image}
            alt="HK Financial Services Development Council"
            src="/images/about-logo-hk-financial-services-development-council.png"
          />
          <img
            className={classes.image}
            alt="Microsoft Partner Network"
            src="/images/about-logo-microsoft-partner-network.png"
          />
          <img
            alt="AWS"
            src="/images/about-logo-aws.png"
            className={classes.image}
          />
          <img
            className={classes.image}
            alt="Tencent Cloud"
            src="/images/about-logo-tencent-cloud.png"
          />
          <img
            className={classes.image}
            alt="Alibaba"
            src="/images/about-logo-alibaba.png"
          />
        </Marquee>
      </section>
    </>
  );
}

from react-fast-marquee.

Hi @justin-chu, any luck?
Perhaps try adding a continuous prop to the Marquee tag? Not entirely sure how that will work though. I see that the demo is working fine on your website but I'm having trouble making mine work continuously, would be great if you could help me out!

from react-fast-marquee.

Hey @PG-20, sorry, I should have a fix pushed by next week. A temporary fix for you might be to paste all the components multiple times as the children of the marquee.

from react-fast-marquee.

Great, I'll wait. So I guess you found the bug then? What was the issue?

from react-fast-marquee.

Any update on this issue? I'm also facing a problem with a gap between the first and last component on large screens.

from react-fast-marquee.

Hello, I've encountered the same phenomenon.
When i removed div.marquee min-width:100% property in chrome developer tab it works well.
I read above issues and found this problem fixed in 1.4.0 so i updated latest version but i think it still has a problem and i don't know why.
Could you help me please?

from react-fast-marquee.

im try to use the marque fast and dont show all the pictures also the autofill dont work.. maybe some one know where is the problem?

`

        <div className="m-1  flex p-4 ">
          <img
            src={css}
            alt="css logo"
            className="  h-[115px] object-cover"
          />
        </div>

        <div className="m-1  flex p-4 ">
          <img
            src={nextjs}
            alt="nextjs logo"
            className=" h-[115px] object-cover"
          />
        </div>
        <div className="m-1  flex p-4 ">
          <img
            src={elementor}
            alt="elementor logo"
            className="  h-[115px] object-cover"
          />
        </div>
        <div className="m-1  flex p-4 ">
          <img
            src={firebase}
            alt="firebase logo"
            className="  h-[115px] object-cover"
          />
        </div>
        <div className="m-1 flex p-4 ">
          <img
            src={zustand}
            alt="zustand logo"
            className=" h-[115px] object-cover"
          />
        </div>
        <div className="m-1  flex p-4 ">
          <img
            src={redux}
            alt="redux logo"
            className=" h-[115px] object-cover"
          />
        </div>

        <div className="m-1  flex p-4 ">
          <img
            src={node}
            alt="node logo"
            className=" h-[115px] object-cover"
          />
        </div>
      </Marquee>`

from react-fast-marquee.