Tips on keeping the size of a react-bootstrap modal constant and enabling scrolling instead of expanding

<Modal size="lg" scrollable show={showInvModal} onHide={handleCloseInvModal}>
                <Modal.Header closeButton>
                    <Modal.Title>Check out our latest items!</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <ItemCard
                        title="Classic Leather Jacket"
                        price="$150"
                        image="https://example.com/leather-jacket"
                    />
                    <ItemCard
                        title="Vintage Sunglasses"
                        price="$50"
                        image="https://example.com/vintage-sunglasses"
                    />

                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={handleCloseInvModal}>
                        Close
                    </Button>
                    <Button variant="primary" onClick={handleCloseInvModal}>
                        Add to Cart
                    </Button>
                </Modal.Footer>
            </Modal>

I want to showcase more items in the same style as above, but I need it to be scrollable. Any suggestions on how I can achieve this?

cssreactjsbootstrap-4bootstrap-5

Answer №1

It appears that the Modal component is already configured to be scrollable when its content overflows.

You can try adding a style to the Modal.Body element with a specific maxHeight value to prevent it from expanding further and instead make it scrollable.

For example:

<Modal size="lg" scrollable show={showInvModal} onHide={handleCloseInvModal}>
  <Modal.Header closeButton>
    <Modal.Title>Sell your items!</Modal.Title>
  </Modal.Header>
  {/* 👇 Define a custom max height style for Modal.Body */}
  <Modal.Body style={{ maxHeight: '650px' }}>
    <ItemCard
      title="The Last Egg of 2012"
      price="492"
      image="https://rest-bf.blox.land/render/76692407"
    />
    <ItemCard
      title="The Last Egg of 2012"
      price="492"
      image="https://rest-bf.blox.land/render/76692407"
    />
  </Modal.Body>
  <Modal.Footer>
    <Button variant="secondary" onClick={handleCloseInvModal}>
      Close
    </Button>
    <Button variant="primary" onClick={handleCloseInvModal}>
      Save Changes
    </Button>
  </Modal.Footer>
</Modal>

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

Querying data elements using Graphql mutations: a step-by-step guide

const MUTATION_QUERY = gql` mutation MUTATION_QUERY( $name: bigint! ) { insert_name( objects: { name: $name } ) { returning { id name } } } `; const [onClick, { error, data }] = useMut ...

reactjstypescriptgraphqlfrontendgraphql-mutation

The initial value for Redux-thunk input

I have created a simplistic Single Page Application (SPA) using the thunk library. This application utilizes the GitHub API to fetch a list of repositories. Initially, I had implemented an example with a class-based presentational component that included l ...

reactjsreduxreact-reduxredux-thunk

What could be causing the Typescript error when utilizing useContext in combination with React?

I am currently working on creating a Context using useContext with TypeScript. I have encapsulated a function in a separate file named MovieDetailProvider.tsx and included it as a wrapper in my App.tsx file. import { Context, MovieObject } from '../in ...

reactjstypescriptuse-stateuse-context

React JS Issue: Real-time Clock not updating in React component

I have a react application designed for attendance tracking. The issue at hand is that the time displayed does not update in real-time. Once the app is initially rendered, the time remains static. (It only updates when the app is reloaded) The code snipp ...

javascriptreactjs

Removing the loading spinner from Ag Grid

While utilizing ag-grid with rowModelType=serverSide, I have encountered an issue where the loading overlay includes a spinner as shown in the image below. My goal is to eliminate this spinner from the overlay. I attempted using hideOverlay(), but it seems ...

cssreactjsag-grid

Connecting components in React using their IDs on the same page

In my project to create a one-page website in React, I have divided it into different components such as a navbar component and an education component. My goal now is to link the navbar to the education section. In my App.js file, I am including the educat ...

htmlreactjs

In TypeScript Next.js 14 APP, object literals are limited to declaring existing properties

I encountered an error in my typescript next.js 14 APP. I need assistance resolving this issue, which states: Object literal may only specify known properties, and 'productPackages' does not exist in type '(Without<ProductCreateInput, Pr ...

reactjstypescriptnext.jsprisma

div is consistently correct across all web browsers

After creating the following CSS code for a div to always be positioned on the right: #button > .right { background-position: -268px 1415px; height: 180px; position: fixed; right: -90px; top: 40%; width: 263px; -webkit-transform ...

csscross-browser

Navigating back from a Child Component to its Parent in React Native

In my app, I have implemented multiple nested navigations (Stacks and BottomTab) and I am trying to figure out how to navigate from a child of a navigator back to the top. Consider the example below: import { NavigationContainer } from "@react-navigat ...

reactjsreact-nativereact-navigationreact-native-navigationreact-navigation-stack

Does a <Navigate> exist in the react-router-dom library?

Within the parent component import LoginPage from "pages/admin"; export function Home() { return <LoginPage />; } Inside the child component import { useRouter } from "next/router"; export default function LoginPage() { co ...

reactjstypescriptnext.js

React's copy-to-clipboard functionality is failing to trigger

I am encountering an issue with the element below: <CopyToClipboard text={color.color}> <ColorBox numberOfShades={this.props.numberOfShades} color={color.color} name={color.colorName} copy={this.state.copied} ...

reactjs

When adding a border radius to an iframe, you'll notice delicate curved lines appearing on all four corners

I have implemented material UI's CardMedia component to display an Iframe with a embedded youtube link. To achieve rounded corners for the iframe, I set the border-radius to 30px. Although it successfully rounds the corners, it also introduces thin li ...

cssmaterial-uilinethinborder-radius

Tips for emulating a file upload in Jest

I am currently working on writing a test in jest to carefully analyze the functionality of my reactJS components. In order to validate my reactjs component, I am looking for a way to simulate a file upload within jest. Could anyone provide guidance on how ...

reactjsjestjs

Switching the background image of a div by clicking on a different div

To start, you can locate all of my code right here. http://jsfiddle.net/yfukm8kh/1/ The issue I'm encountering pertains to the following section. var changePic = function (direction, id, array) { var intID = parseInt(id); var intDir = pars ...

jqueryhtmlcssbackground-image

What are the benefits of employing eagerState optimization in React?

When using React's useState, an eagerState optimization prevents duplicate rendering when setting the same value repeatedly. However, I am wondering if there is a similar optimization for this.setState in class components? Even though I use this.setSt ...

reactjssetstate

Is there a way to remove the numeric arrow from the text field?

Is there a way to remove the arrows from a number textField? I have tried the following code without success: const useStyles = makeStyles(theme => ({ const theme = createMuiTheme({ MuiInput: { root: { "&::-webkit-outer-s ...

reactjsmaterial-ui

Attempting to set up node-sass through npm

Encountering an error while trying to install node-sass via npm at any version has left me puzzled. I've gone through several troubleshooting steps: updating node-sass to the latest version updating all dependencies and adjusting webpack.config.js a ...

reactjsnpmwebpackpackage.jsonnode-sass

Using jQuery to control mouseenter and mouseleave events to block child elements and magnify images

My objective is to create a hover effect for images within specific div elements. The images should enlarge when the user hovers their mouse over the respective div element. I plan to achieve this by adding a child element inside each div element. When the ...

javascripthtmljquerycss

Can Webpack be used to produce only CSS files without generating the output.js file?

I've integrated Webpack into my project alongside the extract-text-webpack-plugin. Within my project, I have various build scripts. One of these scripts focuses solely on bundling and minifying CSS. While utilizing Webpack for other tasks, I decided ...

cssnode.jsnpmbundling-and-minificationwebpack

The issue in Docker arises when the standard_init_linux.go script fails on line 219, leading to an error where the user process cannot

Encountering a docker issue while executing the command docker-compose up -d --build. Upon execution, 3 containers namely app, database, and api are created under the application named innovation. However, there seems to be an error when trying to access t ...

node.jsreactjsdocker