0
195
ViewsReact Bootstrap fullscreen prop not working
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.
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!
3 answers
Answer question0
you must remove padding of container
0
add this style to your modal-dialog :
style="max-width: 100% !important; max-height: 100% !important;"
0
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:
npm uninstall bootstrapnpm uninstall react-bootstrapnpm install react-bootstrap@next bootstrap@5.1.1- 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).