score:14
Accepted answer
you can add scrollable
to the modal
:
<modal scrollable={true}>
</modal>
you can get details from the modal
docs
score:32
thanks to amit answer.
the first solution using only styles would be the following:
<modal.dialog>
<modal.header>
<modal.title>modal title</modal.title>
</modal.header>
<modal.body style={{
maxheight: 'calc(100vh - 210px)',
overflowy: 'auto'
}}
>
one fine body...
</modal.body>
<modal.footer>
<button>close</button>
<button bsstyle="primary">save changes</button>
</modal.footer>
</modal.dialog>
there is a new way to implement that behavior using the react-bootstrap
itself:
<modal
scrollable={true}
....
>
....
</modal>
Source: stackoverflow.com
Related Query
- How to add scroll bar for React bootstrap DropDown?
- How to add scroll event in react component
- How can I add a click handler to BODY from within a React component?
- How to add scroll into react-bootstrap Modal.Body
- How to add class in element on scroll React js
- How to add !important into React inline CSS style
- How to add Scroll to top in react
- How to use Bootstrap Modal inside map function in React Js to render indivisual elements?
- React Bootstrap Modal Scroll to Top
- How to show a modal dialog in React using bootstrap
- how add react-loading in react bootstrap table
- react bootstrap modal - how do I get it to show?
- How to add a each element of an array into React state
- How to open bootstrap modal in react component?
- How to add items into specific Id using the react array map method
- How to add if else inside the Tabs in react bootstrap
- How to add height and overflow properties to react table in bootstrap react?
- how to show react bootstrap modal inside the function
- How to add Horizontal Scrollbar in a React Bootstrap Table?
- How to make react bootstrap tooltip to fit into container?
- How to add a custom script into React app component?
- VS Code: how to add all default snippet of HTML files into react js files?
- how to hide a bootstrap modal using React JSX
- How to add a JS Script tag from into React App's ComponentDidMount?
- How to add a button inside a react bootstrap table?
- how can i add classname body scroll down react?
- How to add scroll into listItem of list on search
- How do you add Bootstrap Themes to REACT App.js
- How to add more props into useController in React Hook Form with TypeScript?
- How can I import local Bootstrap CSS into a React app without overriding my CSS files?
More Query from same tag
- No .bind() or Arrow Functions in JSX Props making no sense to me when I need to pass arguments
- How to use useEffect to change useState whenever a var is changed without triggering an infinite loop?
- Add a disabled field to a checkbox if a user has checked a certain amount
- Unwanted content is showing while closing modal
- CodeSandbox - PostCSS received undefined instead of CSS string
- default.auth(...).collection is not a function
- Returning a div x amount of times ReactJS
- how to use material-ui select field with formik?
- array.map from redux won't return data on the first load of react component
- How Insert data to two tables at once?
- Fill an object (in React js) using results from get request using axios
- Make a horizontal bar using react-chartjs-2
- how to build a React application as a widget inside another website
- Passing props from a parent component to a child component in react
- How to track pageviews on React
- hwo to display javascript within html quotes
- How to define default mock data for relay?
- Two imports div in map()
- The state of this element is Undefined for first time?
- React.cloneElement not appending className
- Is it correct to combine ? and ! in Typescript?
- React Router - on page refresh my images from parents disappear
- WebSockets via browser on React + NodeJS
- Next tailwindcss google font link tag not applying
- How to trigger a form submit in child component with Redux?
- I am having difficulty to align components(widgets, html components, react components etc.)
- I structured my HOC so it could be invoked twice. How do I connect redux in this context
- change default texts in react-data-table-component
- console.log this.props show undefined but renders correctly on react redux page
- React.Children.map vs children.map, what's the different?