What is the best way to include a maximum height in my ScrollToBottom element?

I am currently attempting to limit the maximum height of my component as adding user messages causes it to expand and stretch the whole page. However, I have been unsuccessful in setting a maxHeight property for the component. I am utilizing ScrollToBottom from the 'react-scroll-to-bottom' library.

https://i.sstatic.net/2xWKh.jpg https://i.sstatic.net/CLznu.jpg

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>

Answer №1

I decided to wrap the <ScrollToBottom/> with a div and added some styles to the div, which fixed the issue. Interestingly, when I tried applying CSS directly to the <ScrollToBottom/> component, it didn't work as expected. My suggestion for anyone facing a similar problem is to try this simple solution.

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>
  );
};

Check out the demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an error message of "BrowserAuthError:uninitialized_public_client_application" while attempting to use SSO with MSAL in a React and Next.js

I am currently developing a React application using Next.js 14 and the App router. I am attempting to implement single sign-on (SSO) using Azure Msal. In my project, I have created a Msal.ts file which contains the MSAL configuration that I am utilizing i ...

What is the best way to define Bootstrap 5's CSS variables with the :root selector?

I am working with a Bootstrap 5 application that utilizes various web components, all styled with Bootstrap 5. I am looking to dynamically customize the theme within the parent component that integrates these web components. The basic structure of my setup ...

What is the best way to disable the functions doajax_red and doajax_blue when a radio button is checked?

Is there a way to halt the functions doajax_red and doajax_blue when a radio button is checked? Upon loading the page index.php, clicking the red button will display a loading image. If you check the BLUE radio button and then re-check the RED radio butt ...

including a code snippet within a dropdown menu or embedding it in a clickable button

Hey there, my name is Wouter Sanders and I am currently learning to code! I recently finished creating a RAL color picker for a project I'm working on. The only issue I've run into is trying to embed the code in a menu or button so that it doesn ...

Understanding conditional statements in JavaScript can greatly enhance your programming skills

Here's a search component that I've been working on. I'm trying to figure out how to handle the scenario where there are no items in the array. Should I use an if statement or is there another approach I should take? Any help would be greatl ...

Freeze the headers of multiple tabulators on a single page without restricting the height

My website contains more than 3 tabs and several charts interspersed between tables. Based on the requirement, we have not set a fixed size for the tables. Therefore, the height of the table varies depending on the data. I am looking to fix the headers o ...

Tips for eliminating default classes from Mui Typography styling

I’ve been working on creating a Typography element and noticed some default MUI CSS classes added when debugging in the browser. I attempted to disable them by using empty arrays at the end of the sx prop, but it did not work as expected. In the image p ...

In the case of a PDF being in landscape orientation, the full width of the document is not utilized despite the width being set to

Even though I have specified the width of the Header table to be 100% and applied a margin-right of 1cm for PDF reports with landscape orientation, the table is not taking up the full width. However, when my PDF report has portrait orientation, the header ...

Ways to transfer a function as attributes from one functional element to another?

I've encountered an issue when passing a function as a prop from one functional component (Dashboard) to another (Event). Every time I click the button on the child component that holds the passed function prop in the onClick value, it results in an e ...

Japanese Character File Naming Convention

When dealing with certain Japanese characters, the content disposition header appears as follows: Content-Disposition: attachment; filename=CSV_____1-___.csv; filename*=UTF-8''CSV%E3%82%A8%E3%83%93%E3%83%87%E3%83%B3%E3%82%B91-%E3%82%B3%E3%83%94%E ...

Adjust the classes of the static navigation bar based on the background of the section it is positioned over

In the process of developing a website using Bootstrap 4, I encountered a challenge with sections featuring both light and dark backgrounds along with a fixed navbar. The navbar, which is set to dark using the css class bg-dark, becomes indistinguishable ...

Copy the style of a chosen element and apply it to another element

One of the challenges I'm facing involves a dynamic span element that changes based on color selection: <span class="color checked" style="background-color: #ff0000">Red</span> In addition, I have an image element wit ...

What Android versions are compatible with Material 3 (MD3)?

As I delve into my research on Material 3 support, I am encountering difficulty in locating a comprehensive list of Android versions that are compatible with the Material 3 design library (MD3). ...

The alignment of margins appears as intended in Opera, Chrome, and IE, but unfortunately it does not

I have exhausted all possible options, but I am still struggling to get this page to appear correctly in Firefox. When you click inside the square, a menu with images should display on the right side. It is properly aligned in every browser except for Fire ...

TypeScript Implementation of ES6 Arrow Functions

Just diving into Typescript, I'm struggling to figure out the solution. I tried researching and looked into destructuring, but still unable to make it work. import React from "react"; import { StyleSheet, Text, View } from "react-native"; const st ...

Maintaining a Multi-page template in PhoneGap: Best practices

I'm a beginner in Hybrid app development, currently using PhoneGap and Jquery Mobile. In my app, I have around 10 separate pages such as login.html, index.html, search.html, etc. My query is whether I should include all JS and CSS files on each indivi ...

I'm encountering issues with Npm start and Build on my Windows system, they are not functioning

For the past few months, I've relied on npm to work on my projects without any issues. However, all of a sudden, it stopped functioning properly 5 days ago across all my React projects. Every time I attempt to run npm start, I encounter an error mess ...

Adjust the width of the table by utilizing the border-collapse property set to collapse

I am completely baffled by this situation. Whenever I adjust the border-width of a table (either dynamically with JavaScript or in Chrome Dev Tools) where border-collapse: collapse; is set, transitioning from a border width of 1px (#1) to a larger value (# ...

Multi-line auto-suggest list with typeahead functionality

Currently, I am utilizing typeahead with Twitter Bootstrap and AngularJS. The autocomplete suggestions are displayed in a single line, as seen in the screenshot below. However, I would like to have the big cities' names displayed on separate lines. Fo ...

"The power of React Redux combined with the efficiency of Fetch

My React app with Redux has the following structure: <ComponentParent> <ComponentA></ComponentA> <ComponentB></ComponentB> </ComponentParent> Within Component A's ComponentDidMount method, a fetch is made to retri ...