React-bootstrap's Modal is glitching and only partially appearing on the screen

I am a beginner in frontend development and I've been struggling to position the modal at the center of the screen; it keeps appearing on the right side. I am currently using "bootstrap/dist/css/bootstrap.min.css" for my CSS. Should I create a new CSS file to rectify this issue?

import React, { Component } from "react";
import "./App.css";
import LoginPage from "./LoginPage";
import "bootstrap/dist/css/bootstrap.min.css";
import { Modal, Button } from "react-bootstrap";

import ReactTelephoneInput from "react-telephone-input/es/ReactTelephoneInput";
class App extends Component {
state = {
    selectLoginOption: false,
    userLoginOption: false,
    restaurantLoginOption: false,
    deliveryAgentLoginOption: false,
    closeAllOptionsOfSelectionForm: false
};

style = {
    left: 0
};

// Various login and registration methods...

render() {
    // Render method containing JSX code...
}

}

export default App;

Click here to view a local webpage with the modal incorrectly positioned off-center.

htmlcssreactjs

Answer №1

If you haven't shared your current CSS code, it's difficult to pinpoint the exact issue you're facing. However, here is a recommended approach that should help:

Start by taking your modal div and setting its position to either absolute or fixed. Specify a width and height for the modal, and then set the margin to auto. This will effectively center the modal horizontally.

Since the position isn't relative to its siblings in the document, it's important to also assign values of zero to the div's top, left, right, and bottom properties for the desired effect.

#modal {
  /*Position and dimensions*/
  position: fixed;
  width: 30%;
  height: fit-content;
  
  /*NOTE: If using absolute or fixed positioning, include these as well:*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /*Horizontal centering*/
  margin: auto;

  /*Aesthetics*/
  border: 2px solid #ccc;
  border-radius: 3px;
  background-color: ghostwhite;
  text-align:center;
}
<div id="modal">
  <p>Some sample content</p>
  <button type="button">Click Here</button>
</div>

Answer №2

It seems that you are utilizing the Modal component from 'react-bootstrap' library.

Perhaps you forgot to include the necessary Bootstrap CSS file.

To resolve this issue, kindly add the following import statement in your index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

By doing so, the Modal will automatically be displayed at the center of the screen.

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

ESLint prohibits the usage of React.StatelessComponent and React.FunctionalComponent within the codebase

Is there a way to restrict the use of React.StatelessComponent or React.FunctionalComponent and only allow React.FC in my code? For instance: export const ComponentOne: React.StatelessComponent<Props> = (props) => { return <....> }; export ...

reactjstypescripteslinteslintrctypescript-eslint

Set boundaries for the width and height of an image in the input field

Looking to restrict the size of an image in an input field using HTML, CSS, and JavaScript/jQuery. Goal is to maintain a perfect square aspect ratio for profile photo uploads (for example, 200x200 or 300x300). ...

javascriptjqueryhtmlcss

A guide to updating a component on the same route path in ReactJS using Links in version 6

Currently, I have a sidebar menu that allows users to navigate between different pages on the site. However, I've noticed that if a user clicks on the menu item for the current page they are on (e.g., current path is /user and they click on /user agai ...

reactjsreact-router-dom

Bug with the animation of height in Jquery

Unfortunately, I can't share my entire source code here because it's quite lengthy. However, maybe someone can provide some insight into a common issue that may be happening elsewhere. The problem I'm facing is with a DIV element that has r ...

jqueryhtmlcssanimation

"Implement a CSS hover effect that targets the child elements within a div, rather than

Looking to experiment with a new product card layout and encountering an issue with the box shadow effect. When hovering over the product card, the hover function only affects the child elements of the div Product-Card hov instead of the actual div itself. ...

htmlcss

Stop flex child from shrinking in size

I have a form row with two inputs. There is a requirement to show ⚠️ (warning emoji) next to the second input in the row, based on the input number. However, because of how flexbox behaves, the input size gets reduced... How can I maintain the input s ...

htmlcssreactjsbootstrap-4flexbox

Enhance your picture links with a:hover box-shadow styling

I've been struggling to add a box shadow on hover to a Facebook icon image. I assumed it would be straightforward, but as always, I was wrong. I'm working with a child theme in WordPress because I recently started, thinking it would be an easy wa ...

hovermouseovercss

Can anyone suggest a way to change the orientation of mapped items from column to row?

In my React app, I am creating a keyboard using the following component: Keypad.js const Keypad = () => { const letters = [ 'Q', 'W', 'E', 'R', 'T', ...

htmlcssreactjs

Universal React configuration file for all components

Within my application, I have a configuration file that contains common settings such as the app name, version, and number of records per page. I'd like to be able to access these settings in all components without having to individually import them ...

reactjs

Send a React component to another component as a prop

I am looking to pass the entire parent component as props to its child component. However, when attempting to pass data from parent to child, I ended up importing the child into the parent. Is there another way to achieve this? Any suggestions on how I c ...

javascriptreactjs

Ensure that the image's aspect ratio is preserved while adjusting the height of the window on both Safari and Chrome browsers

Trying to style some cards on my website using HTML and CSS, I noticed that the aspect ratio of the cards gets distorted when resizing the window. This issue only seems to happen in Safari, as Chrome handles it fine. I'm not sure which specific comma ...

reactjscssgoogle-chromesafari

What are the steps to address the Invalid Hook Call issue while working with Material UI?

Having an issue with a MaterialUI Icon in my code as a newcomer to coding. Here is the snippet: import PersonIcon from '@mui/icons-material/Person'; function Header() { return ( <div> <PersonIcon /> <h2>Header file</h2 ...

javascriptreactjsmaterial-ui

Issue with the react-native-autocomplete-input where the list does not close after selecting an option

After selecting an item from the list in my react-native-autocomplete-input, the list does not close. let Location = (props) => ( <View style={styles.formItem}> <Autocomplete data={props.autocompleteResults.predictions} de ...

javascriptcssreactjsreact-nativejsx

What is the best way to align a button to the right in Material-UI?

I've been experimenting with Material UI, but I'm having trouble aligning buttons to the right :( import * as React from "react"; import SvgIcon from "@mui/material/SvgIcon"; import Button from "@mui/material/Button" ...

reactjsmaterial-ui

Encountering a Typescript error while attempting to iterate through Enum keys for generating JSX components

I'm really struggling with this problem. Here's a simple enum I have: export enum depositTypes { ACH = 42, Wire = 36, Check = 3, Credit = 2, } I'm trying to create option tags for a select element, like so: Object.keys(depositTyp ...

javascriptreactjstypescriptenumsmapping

Is there a way to resize a photo that I want to upload?

Have you visited this website? ---SPANISH LANGUAGE Here is another site to check out: ENGLISH LANGUAGE I'm having trouble with the image on the Spanish site showing up correctly. I want it to look like the image on the English site's front ...

htmlcss

Steps to creating a popup within an HTML page from another HTML page

I recently started learning JavaScript. I have a link on my homepage that directs to another HTML page, but I would like it to show as a popup on the homepage with responsiveness and some stylish design elements such as a folded corner. Is there a way to a ...

javascriptjqueryhtmlcss

Simple steps for calling a lit component in React using the ScopedElementsMixin:1. Import

Looking to incorporate the web component Button (lit) into my project using a similar tag approach. For instance, if the <button-test> tag is present on the website, then it should be converted to <button-test-12345>. This is why ScopedElements ...

javascriptreactjslit-elementlit

Creating dynamic movement on webpages using CSS3 Animations

Exploring the world of CSS animations is such a blast! I've created this fiddle to play around with the concept of wheels on a bus. Check out my JS Fiddle here One strange thing I noticed is that sometimes there's a white space between the two ...

csscss-animations

Why is my Typescript event preventDefault function ineffective?

Despite all my efforts, I am still unable to prevent the following a tag from refreshing the page every time it's clicked. <p> <a onClick={(e) => handleClick} href="&qu ...

javascriptreactjstypescript