Text does not scroll on a wide screen

[BrainRayChristensen]

I was trying to create a marquee that spanned the full page width and displayed announcements, but whenever the text got too short (i.e. too few characters). The marquee would stop scrolling.

To recreate, place the following in a div that spans the whole screen.

<div>
    <Marquee>Hello World</Marquee>
</div>

[cdtinney]

Good catch! Open to PRs here.

[BrainRayChristensen]

I wish I had time to help, but I found another solution to my problem. Best of luck to you though!

[mika4president]

Just a suggestion, you might want to check the string-lenght, and append/fill it with spaces whenever the screen is non mobile?

[antontsvil]

I want to take a stab at fixing this. What is the desired behavior for when the container is wide enough to fit two blocks of text + their margins? Do you:

A) Ignore childMargin prop, spread the two text blocks far apart enough so the marquee works visually? Perhaps adjust the margins so it puts the second text block in the middle of the container. In this sense childMargin is more like minimumChildMargin; spacing that's only applied when your text overflows.

B) Generate more than 2 blocks of text; Essentially dynamically calculate how many blocks of text will be required for a seamless marquee effect. I'm assuming this is the use case @BrainRayChristensen would prefer, given that it's common with "announcment" style marquees. However it would no longer be a double marquee would it :smirk:

C) Don't apply a marquee animation unless it's necessary. So if the container is big enough to fit the text, simply display the text with no animation.

I think A or B works well, and I think C would be a nice feature to have in addition, as it would fix #26 (which is my issue and what led me here)

My idea for implementing C is to add a threshold prop which represents how much of the available container space should be filled (by a single margin-less child) before the marquee animation is considered necessary. So if your threshold is 0, all text will scroll. if your threshold is 50, a single child must be bigger than 50% of the container space before the marquee will apply etc. If the threshold isn't passed, then no margin is applied and the second child will render with visibility:hidden, and no animation will play.

thoughts, @cdtinney?

[cdtinney]

Hm. The threshold prop idea seems to cover both use cases (always scroll vs. only scroll if necessary), but the type (percentage) seems a little hard to understand. Do you have ideas for use cases other than these two that would require threshold values that are not 0 or 50?

My first thought would be to use an enum, e.g. ScrollMode.

To cover @BrainRayChristensen's case, it could be something like ScrollMode.ALWAYS which is equivalent to threshold = 0.

To cover your case, it could be something like ScrollMode.ONLY_IF_NECESSARY (or something more clever).

[antontsvil]

Hey, I have a branch ready with a fix for this! Although I think I need to be a contributor to push it (I'm getting a 403). I'm a bit new at contributing to other projects so just let me know what I have to do to push the branch and create the PR

[cdtinney]

Hi @antontsvil! That's amazing. Yes, contributors cannot push to this repo directly.

You'll need to 1) "Fork" the project 2) Push your branch to that project 3) GitHub will allow you to open a Pull Request from your repo and branch to this repo.

There's a pretty good guide to the workflow here:

https://gist.github.com/Chaser324/ce0505fbed06b947d962

[antontsvil]

@cdtinney PR ready to go!