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

Get rid of emojis and unicode characters

My website and database are both configured to utf-8 and utf8mb4 encoding. While textareas accept utf-8 symbols and emojis without issue, I want to restrict certain input fields (such as name and address) to only allow basic text and numbers. This include ...

phpmysqlhtmlutf-8utf8mb4

Material-UI Scroll Dialog that begins scrolling from the bottom

While attempting to incorporate a scrolling div with the ref tag inside Dialog Material-UI Design, I encountered an error stating Cannot read property 'scrollHeight' of undefined When running my code outside of the Dialog, it functions correctly ...

javascriptreactjsmaterial-ui

Finding the height of concealed content within a div using the overflow:hidden setup

I'm trying to create a div that expands when clicked to reveal its content. I've taken the following steps so far: Established a div with overflow:hidden property Developed a JavaScript function that switches between a "minimized" and "maximize ...

javascripthtmlcss

adjust the variable's state within a nested component

My react component has grown quite long as it holds states, and I'm looking to break it down into smaller components. export default function ParentComponent(props) { const [name, setName] = useState(''); ... other functionality ... return ...

reactjsstate

Extracting information from JSON using arrays

I'm facing a bit of a challenge with this one. I've been trying to use jQuery on my website to update an element. It works perfectly fine without using an array of data in JSON, but as soon as I introduce an array of data, it stops functioning. I ...

javascripthtmljqueryjson

Programmatically setting properties for elements

I have a question about how to programmatically add a prop to a component in my React project. Here is the scenario: In the render() method, I have the following code snippet: <TextField name="password" va ...

javascriptreactjsmaterial-ui

Customizing the underlineFocusStyle of a material-ui TextField component using regular CSS styling

When working with Material-UI components, you have the option to provide a style object for the component itself within the JSX tag. However, in certain cases like the underlineFocusStyle of a TextField component, you need to use a separate style object. ...

cssreactjsmaterial-uiinline-styles

Font file not found by Next.js

I'm struggling to implement local fonts in next.js using the localFont function. Here's what I have so far: const Eina = localFont({ src: "../public/fonts/eina01.ttf", }); Unfortunately, no matter where I place the eina file or what ...

reactjsnext.js

having difficulties in separating the mat-table header

It may seem like a basic question, but I'm having trouble figuring it out. I'm not sure if this requires a CSS change or something else. I'm looking to add a divider between my table header similar to the one highlighted in the screenshot be ...

cssangularangular-material

How to position one element relative to another using CSS

I need to strategically place four div elements in relation to another element. I have a rectangular div, and my goal is to insert four div elements at each of its corners. While I am aware of the CSS attribute "position: relative", it only allows me to ...

csscss-position

Establish a predetermined selection for a radio button and its associated checkbox option

I am working on a React material UI group input field that is mapping a dataset. The result consists of one radio button and one checkbox performing the same action. Initially, I attempted to set the state to establish one data item as default. While I fol ...

javascriptreactjsmaterial-ui

The element 'Component' cannot be utilized as a JSX component since its type 'ReactElement<any, any> | Component<{}, any, any>' is not a valid JSX element

I'm currently facing an issue while running "yarn build" and/or "npm run build" on a repository. The error persists for both commands. My goal is to build and deploy this code to an AWS environment, but I am stuck at resolving the errors that indicate ...

javascriptreactjsnext.jsjsx

Tips for positioning the avatar to the right along with other links?

I've encountered various methods to align text or an image to the right, but I'm having trouble aligning a basic avatar with some text. It used to work before I switched to material-ui-next, and now I can't seem to get them aligned properly. ...

htmlcssreactjsmaterial-uiavatar

Transitioning the color of links in Firefox causes flickering when switching between the hover and visited state

I have been working on testing this code snippet in Firefox 49.0 on Linux Mint: a{ font-size:50px; color:gray; font-weight:1000; transition:color 1s; } a:hover{ color:black; } a:visited{ color:lightgray; } <a href="">VISITED LINK</a>&l ...

cssfirefox

Angular 1.4.8 Issue: [$injector:modulerr]

I can't seem to identify the main cause of this error. I consistently see a green underline below the word angular in my javascript file. I'm not sure why. (Using Visual Studio Code) HTML <html ng-app="myapp"> <head> ...

javascripthtmlangularjs

Adjust image loading according to screen dimensions

I am working on HTML code that currently displays an image. The code looks like this: <div> <img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" /> </div> My goal is to show a different image based on the screen si ...

javascripthtmlcss

What could be causing my Font Awesome icon background to fail to load?

As a newcomer to website design, I am currently learning CSS. I seem to be facing an issue where the background for the first two icons has loaded successfully, but the second one isn't displaying. .bg-instagram { padding: 7px 10px; border-radi ...

htmlcss

"Exploring the process of incorporating externals similar to webpack in the latest version of Next.js, specifically

When working with webpack, I discovered a way to use "externals" in order to load additional components or modules into applications and import them. In this example, the component "ymaps3" is loaded as an external script without a react wrapper. Below is ...

reactjswebpacknext.jsyandex-mapsyandex-api

There were no visible outputs displayed within the table's tbody section

import React from 'react'; export default class HelloWorld extends React.Component { public render(): JSX.Element { let elements = [{"id":1,"isActive":true,"object":"Communication","previ ...

javascriptreactjstypescript

Troubleshoot Node.js server-side rendering in Visual Studio Code

Debugging an SSR React application on the server side has been a major struggle for me. Our team is working on developing a new app from scratch, and with the project being so large, debugging the code is crucial. Here's the webpack configuration for ...

node.jsreactjswebpackvisual-studio-codegoogle-chrome-devtools