CODEWITHSUNDEEP
cssreactjsmaterial-uijsx
MrBigboka
MrBigboka

Reputation: 449

How to add max height to my ScrollToBottom component?

I am currently trying to set a maxHeight to my component because when I add content (message from users) it keep expending the height of the whole page but it doesn't seem to work. I am using ScrollToBottom from the library 'react-scroll-to-bottom'.

enter image description here enter image description here

Thank you:)

    messageContainer: {
        display: 'flex',
        height: '100px',
        overflowY: 'scroll',
        overflowX: 'hidden',
    },

<ScrollToBottom classes={classes.messageContainer}>
{messageList.map((data) => {
    return (
        <div
            className={classes.message}
            id={username === data.author ? "you" : "other"}
        >
            <div>
                <div className={classes.messageMeta} id={username === data.author ? "you" : "other"}>
                    <p id='time'>{data.time}</p>    
                    <p id='author'>{data.author}</p>
                </div>
                <div className={classes.messageContent}>
                    <h4 style={{textAlign: 'right'}} id={username === data.author ? "you" : "other"}>
                         {data.message} 
                    </h4>
                </div>
            </div>
        </div>
        );
})}
</ScrollToBottom>

Upvotes: 0

Views: 37

Answers (1)

Sundaramoorthy Anandh
Sundaramoorthy Anandh

Reputation: 601

I wrapped the <ScrollToBottom/> with div and applied styles to the div and it works..btw, its weird when I tried setting css to <ScrollToBottom/> and it havent applied the css .. whatever I'm suggesting is a simple fix

const ScrollFunc = () => {
  const para = (
    <p>
      Laboris duis do consectetur aliquip non aliquip ad ad quis minim. Aute
      magna tempor occaecat magna fugiat culpa. Commodo id eiusmod ea pariatur
      consequat fugiat minim est anim. Ipsum amet ipsum eu nisi. Exercitation
      minim amet incididunt tempor do ut id in officia eu sit est. Dolor qui
      laboris laboris tempor sunt velit eiusmod non ipsum exercitation ut sint
      ipsum officia.
    </p>
  );

  const [paralist, setParaList] = useState(para);

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      height: '100px',
      overflowY: 'scroll',
      border: 'solid 1px blue',
    }}>
    <ScrollToBottom>
      <button
        onClick={() => {
          const newPara = (
            <>
              {paralist}
              <br></br>
              {para}
            </>
          );
          setParaList(newPara);
        }}
      >
        Add para
      </button>
      {paralist}
    </ScrollToBottom>
    </div>
  );
};

demo @ link

Upvotes: 1

Related Questions