0
197
ViewsEl accesorio de pantalla completa React Bootstrap no funciona
Describa el error
Agregar el accesorio de pantalla completa a Modal no hace que Modal pase a pantalla completa.
Ejemplo reproducible
Ejemplo mínimo usando CodeSandbox .
Comportamiento esperado
El modal para ser pantalla completa.
capturas de pantalla
Este es el ejemplo en Code Sandbox. Tampoco funciona en mi aplicación. En mi aplicación estoy usando la última versión del paquete react-bootstrap. El ejemplo de Code Sandbox usa 1.5.2. 
Ambiente
- Sistema operativo: mac OS M1
- Navegador, Versión: Chrome v94
- Versión de React-Bootstrap: 1.5.2 en Code Sandbox. 1.6.3 en mi aplicación.
Contexto adicional
Estoy confundido porque el accesorio de pantalla completa parece estar funcionando en el ejemplo de los documentos. Puede ejecutar un emulador de teléfono en Chrome aquí y verlo funcionar. No veo ninguna diferencia importante entre el código de mi aplicación y los documentos. ¿Me estoy perdiendo de algo? ¿Haciendo algo mal? Por último, estoy tratando de afectar solo un modal en particular en mi aplicación, y solo quiero que el modal pase a pantalla completa cuando el tamaño de la pantalla es pequeño. ¡Cualquier ayuda es muy apreciada!
3 answers
Answer question0
debe quitar el relleno del contenedor
0
agregue este estilo a su cuadro de diálogo modal:
style="max-width: 100% !important; max-height: 100% !important;"0
La respuesta es que el accesorio de pantalla completa en Bootstrap Modal solo es compatible con la versión 5 de react-bootstrap. Alguien amablemente me ayudó con este problema de GitHub .
Para actualizar a Bootstrap 5, ejecute estos comandos en su terminal:
-
npm uninstall bootstrap -
npm uninstall react-bootstrap -
npm install react-bootstrap@next bootstrap@5.1.1 - Coloque el siguiente fragmento en su archivo index.html, en su carpeta pública
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />Si aún no tiene Bootstrap instalado, los dos primeros comandos no serán necesarios.
Nota: si su aplicación usa Bootstrap 4, es posible que no valga la pena actualizar a Bootstrap 5 solo por este accesorio. Hay al menos varios componentes de Bootstrap 4 React que no son compatibles con Bootstrap 5 (es decir, Form.File, Accordion.Toggle y InputGroup.Prepend).