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>

https://i.sstatic.net/f5TdG.png

https://i.sstatic.net/KL8tW.png 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

How can I navigate and click on a drop-down menu link in Python using Selenium and CSS selectors?

This is an example of the HTML code: <span class="MenuIcons searchButton"></span> ... (additional content) <a data-bind="" url="/ParagonLS/Search/Property.mvc/Index/1" tabdescription="RESIDENTIAL" subtabdescription="Criteria" subtab ...

pythoncssselenium

When attempting to implement styled-components in Next.js, there is an issue with the node module in React.js causing an error

I am trying to incorporate styled-components in my next.js react project. This is the approach I am taking: import styled from 'styled-components'; export const MainTitleContainer = styled.div` text-align:right; margin:3rem 0; paddin ...

reactjscompiler-errorsnext.jsstyled-components

How to Align col-md-5 in the Center Using Bootstrap?

Is anyone else struggling with this dilemma or is it just me? I've been searching everywhere for a solution to my problem but I can't seem to find one. According to the grid system, if you have a column size of col-md-5, centering it should be ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-3bootstrap-5

Manipulate SVG elements with JavaScript to embed a PNG image into the SVG file

Is it possible to edit an SVG, such as changing the fill color and other SVG methods? I am also looking to insert an SVG/PNG within another SVG at a specific path or group. Can someone provide guidance on how to achieve this? ...

javascriptreactjssvgsvg-edit

Error: rails-ujs has already been initialized and running

I'm in the early stages of developing a Rails application that incorporates React on the front-end, but I'm struggling to load my test/setup component. I'm unsure of the root cause of this issue or how to go about resolving it. After search ...

ruby-on-railsreactjs

My react project is experiencing erratic behavior with SCSS styling, causing inconsistency throughout the application

I've been working on customizing Material UI tables in React by applying styles to individual table cells using SCSS. I've successfully imported and applied the SCSS, which reflects correctly in my React project. However, I've noticed that e ...

reactjssassmaterial-ui

Receiving duplicate data from Redux props

Utilizing redux for handling async data and responses, I encountered an issue in the following component. When I post a recipe and receive a response from the server through redux, the success modal pops up twice. I have verified that the reducer is runn ...

reactjsreduxreact-reduxreact-lifecyclereact-lifecycle-hooks

Displaying object properties in React and rendering them on the user interface

Within my React application, I am retrieving data from an API using the following code snippet: function PlayerPage() { interface PlayerDataType { id: number; handle: string; role: string; avatar: string; specialAbilities: null; s ...

reactjstypescript

Creating a custom Chrome extension with CSS embedded within an iframe

Recently, I developed a Chrome app that includes an iframe element within it. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="v ...

cssgoogle-chrome-app

Determining When the Refetch Operation in React-Query Has Completed

In my current setup, I have a component that uses react-query to fetch data and set initial form values: const { data: caseData, refetch, isRefetching } = useQuery({ queryKey: `caseData-${caseId}`, queryFn: () => fetchCaseById(caseId), staleTime: ...

reactjsreact-hook-formreact-query

Creating a table to showcase the outcomes of two different conditions

I am struggling to include two conditional result statements in a table, but I can't seem to make it work. If the form input is empty, the result should not be shown. In order to save space, I would like to organize the results in a table with eithe ...

phphtmlcsswordpresshtml-table

Ensuring the child div's height does not overflow beyond the parent div

When dealing with a parent div and a child div, both having different heights, how can I specifically retrieve the height of the portion of the child div that is within the boundaries of the parent div? Using document.getElementById("id").style.height prov ...

javascripthtmlcss

Each time input is entered, the JSON data is duplicated and the entered input is not visible on the screen

As I delve into learning Next.js, my goal is to create a basic todo list using a JSON todos API for data. In the process of building the program, I opted to utilize Redux Toolkit for fetching the todos data. However, I am encountering an issue where newly ...

reactjsjsonnext.jsredux-toolkit

Using Data URIs can negatively impact the loading speed of a webpage

I created a custom script to replace all inline images with data URIs in order to minimize http requests and speed up loading times on mobile devices. Surprisingly, I noticed a decrease in loading speed. Could it be because the HTML file was larger (aroun ...

htmlcssperformancedata-uri

Showing text above bars in MUI X BarChart

I am currently utilizing the <BarChart> component from @mui/x-charts (version "^6.19.1") and I am looking to enhance readability by displaying the data values on top of each bar. Current Output: view image description here Desired Outc ...

javascriptreactjsnext.jsmui-x-charts

What is the best way to navigate my Page while my Dialog Component is displayed?

Is there a way to enable scrolling on the background when a dialog component opens up? By default, scrolling is disabled when the dialog appears. How can we allow scrolling in the background? Here is the code snippet: import React, { useState } from &apos ...

cssreactjsmaterial-uimaterial-designstyled-components

Upgrading React Native hot reloading leads to a complete reload of the application

Recently, I updated my React Native app from version 0.48 to 0.55. Unfortunately, after the upgrade, hot reloading stopped functioning. Any modifications to the files now trigger a complete reload of the app. I have attempted clearing all cache related to ...

javascriptreactjsreact-native

What is the best way to cycle through a nested JS object?

I am currently utilizing useState and axios to make an API call, retrieve the response, and pass it to a Component for rendering. const [state,setState] = useState([]); const getCurrData = () => { axios.get('working api endpoint url').then(r ...

javascriptreactjs

Can a CSS rule be prevented from inheriting?

Currently, I have implemented this CSS rule in the body selector: body { text-align:center } However, it seems like this rule is inheriting down to all other text elements on the page. Is there a way to prevent CSS from applying this rule to other elem ...

css

In Typescript ReactJS, how can the useReducer hook be implemented to increment a particular property of an object upon clicking a button?

Is there a better way to increase the property values of an Attribute object (STR, AGI, INT, and CHA) using useReducer actions? I currently have separate actions for each property, but it leads to a lot of redundant code. I'm looking for a more effici ...

reactjstypescriptreact-hooksnext.jsreact-tsx