React Bootstrap fullscreen prop not working

user_13021328 0
Viewed 1087

Describe the bug

Adding the fullscreen prop to Modal isn't making the Modal go fullscreen.

Reproducible Example

Minimal example by using CodeSandbox.

Expected behavior

The modal to be fullscreen.

Screenshots

This is the example on Code Sandbox. It's also not working on my app. In my app I'm using the latest version of the react-bootstrap package. The Code Sandbox example is using 1.5.2. Screen Shot 2021-09-22 at 10 20 28 AM

Environment

  • Operating System: macOS M1
  • Browser, Version: Chrome v94
  • React-Bootstrap Version: 1.5.2 on Code Sandbox. 1.6.3 in my app.

Additional context

I'm confused because the fullscreen prop seems to be working in the example in the docs. You can run a phone emulator in Chrome here and see it working. I don't see any important difference between the code in my app and the docs. Am I missing something? Doing something wrong? Lastly, I am trying to affect only one particular modal in my app, and I only want the modal to go fullscreen when the screen size is small. Any help is greatly appreciated!

react-bootstrap reactjs javascript
3 Answers

you must remove padding of container

user_98880210

add this style to your modal-dialog :

style="max-width: 100% !important; max-height: 100% !important;"
user_98880210

The answer is that the fullscreen prop on a Bootstrap Modal is only compatible with react-bootstrap version 5. Someone kindly helped me out on this GitHub issue.

To upgrade to Bootstrap 5, run these commands in your terminal:

  1. npm uninstall bootstrap
  2. npm uninstall react-bootstrap
  3. npm install react-bootstrap@next bootstrap@5.1.1
  4. Put the following snippet in your index.html file, in your public folder
<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
 integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
 crossorigin="anonymous"
/>

If you don't have Bootstrap already installed then the first two commands won't be necessary.

Note: If your app is using Bootstrap 4, it may not be worth upgrading to Bootstrap 5 just for this prop. There are at least several Bootstrap 4 React components that aren't compatible with Bootstrap 5, (i.e. Form.File, Accordion.Toggle, and InputGroup.Prepend).

user_130213280
Related