The width of the <ul> element does not properly accommodate the width of the <li> elements during the animation that updates the width of the <li>

Question

The width of the <ul> element does not properly accommodate the width of the <li> elements during the animation that updates the width of the <li>

I am currently working on implementing a typing animation in React. The li element has an animation that recursively changes its width from 0px to 100%. However, I have noticed that when the width of the li changes, the parent ul does not adjust its width accordingly, resulting in empty space in the text area. I would like the wrapper to shrink along with the li animation.

I suspect the issue may be related to how I directly manipulated the content of the li element using ref.current.contentText, but I cannot be certain.

To provide a visual representation of the problem, I have created a demo where the empty space is highlighted in blue:

Demo: https://codesandbox.io/s/nostalgic-breeze-hq7d6e?file=/src/styles.css

If anyone has any insights into what might be causing this issue and how it can be resolved, I would greatly appreciate your help. Thank you.

javascript html css reactjs

Answer 1

Answer №1

My strategy has transitioned from utilizing CSS to focusing on Javascript in order to circumvent the problem at hand. However, I welcome any insights or comments regarding the root cause of the CSS issue. Thank you!

const Test = () => {

    const textOptions = ['Military Personnel', 'Software Developer', 'Construction Worker', 'Medical Professional'];
    const dynamicRef = useRef(null);

    useEffect(() => {
        function changeText() {
            let optionIndex = 0;
            let charIndex = 0;
            let increment = true;

            setInterval(() => {
                if (dynamicRef.current) {
                    dynamicRef.current.textContent = textOptions[optionIndex].slice(0, charIndex);

                    if (charIndex === textOptions[optionIndex].length) {
                        setTimeout(() => {
                            increment = false;
                        }, 500);
                    } else if (charIndex <= 0) {
                        optionIndex++;
                        increment = true;
                    }

                    if (increment) {
                        charIndex++;
                    } else {
                        charIndex--;
                    }

                    if (optionIndex > textOptions.length - 1) {
                        optionIndex = 0;
                    }

                }
            }, 100)
        }
        changeText();
    }, [])

    return (
        <div className='test'>
            <div className='wrapper'>
                <p>I am</p>
                <p ref={dynamicRef}></p>
            </div>
        </div>
    )
}

Answer 2

My strategy has transitioned from utilizing CSS to focusing on Javascript in order to circumvent the problem at hand. However, I welcome any insights or comments regarding the root cause of the CSS issue. Thank you!

const Test = () => {

    const textOptions = ['Military Personnel', 'Software Developer', 'Construction Worker', 'Medical Professional'];
    const dynamicRef = useRef(null);

    useEffect(() => {
        function changeText() {
            let optionIndex = 0;
            let charIndex = 0;
            let increment = true;

            setInterval(() => {
                if (dynamicRef.current) {
                    dynamicRef.current.textContent = textOptions[optionIndex].slice(0, charIndex);

                    if (charIndex === textOptions[optionIndex].length) {
                        setTimeout(() => {
                            increment = false;
                        }, 500);
                    } else if (charIndex <= 0) {
                        optionIndex++;
                        increment = true;
                    }

                    if (increment) {
                        charIndex++;
                    } else {
                        charIndex--;
                    }

                    if (optionIndex > textOptions.length - 1) {
                        optionIndex = 0;
                    }

                }
            }, 100)
        }
        changeText();
    }, [])

    return (
        <div className='test'>
            <div className='wrapper'>
                <p>I am</p>
                <p ref={dynamicRef}></p>
            </div>
        </div>
    )
}

The width of the <ul> element does not properly accommodate the width of the <li> elements during the animation that updates the width of the <li>

Answer №1

Similar questions

Having trouble getting the onclick function to work in order to switch out the images

What is the best way to load a partial in Rails asynchronously with AJAX?

Encountering issues with retrieving application setting variables from Azure App Service in a ReactJS TypeScript application resulting in '

Determine the distinct elements in an array using JavaScript/jQuery

When attempting to launch my JavaFX 2 application from an HTML page, it fails to execute

Strange yellow border appears when key is pressed in Quasar's QLayout

What is the best way to reset state in a React component when a key is pressed down while typing in an input

Tips for targeting a specific default MUI class

Is it possible to execute PHP without using Ajax when clicking on a Font Awesome icon?

Top 14 techniques for efficiently exchanging data between components in NextJS

Keeping the script tag intact while adding it to the off-page DOM, and then injecting it into the page with jQuery

Exporting a VueJS webpage to save as an HTML file on your computer

Crafting an interactive saturation effect for mouseover interactions in a circular design

"Combining Array Elements in jQuery: A Guide to Merging Two Array Objects

Is there a way to modify the font color in Chrome when the input autofill feature is active?

"Enhancing the speed of the JavaScript translate function when triggered by a scroll

Reasons Behind Slow Unmounting of React Components

Arranging elements on a webpage using CSS grid placements

Error: Unable to access the 'wsname' property of an undefined value

Getting an error in React when using Typescript with a functional component? The issue might be that you are trying to assign a type 'boolean' to a type 'ReactElement<any, any>'