The scroll function malfunctions when attempting to center-align content on the screen with the use of transform

Is there a way to center a div on the screen without encountering scrolling issues when the screen size is reduced?

If you have any alternative solutions (excluding the use of transform), please share, as I've tried various approaches but have not been able to successfully center the div on the screen.

.LoginContainer {
  background-color: $base;
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.LoginBox {
  margin: 1rem;
  padding: 5rem;
  max-width: 30rem;
  width: 60%;
  position: relative;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: white;
}
<div class="LoginContainer">
  <div class="LoginBox">
      TEST
  </div>
</div>

You can see the issue I'm facing in this sandbox:

Sandbox Demo

Here are images showing how the component gets clipped when the screen height is reduced:

Clipped Screen Image

Regular Screen Image

htmlcssreactjs

Answer №1

Could centering child elements by using the following code:

.LoginContainer {
    background-color: $base;
    ...
    display: flex;
    justify-content: center;
    align-items: center;

}

Answer №2

If you'd like the parent element to be scrollable while allowing the LoginComponent to scroll:

.LoginContainer {
  background-color: $base;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.LoginBox {
  padding: 15rem 5rem;
  position: relative;
  background-color: yellow;
}
<div class="LoginContainer">
  <div class="LoginBox">
      TEST
  </div>
</div>

If you prefer the LoginComponent to stay within the boundaries of the parent and remain scrollable:

.LoginContainer {
  background-color: $base;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.LoginBox {
  padding: 15rem 5rem;
  position: relative;
  background-color: yellow;
  max-height: 100%;
  overflow: auto;
}
<div class="LoginContainer">
  <div class="LoginBox">
      TEST
  </div>
</div>

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

Issues with the styling of HTML code

Our website features a main menu with submenus that are intended to be displayed only when hovering over the main menu. However, upon loading the site, the submenu is already visible causing an issue. We need the submenu to appear only when the main menu i ...

javascripthtmlcss

Having trouble importing a file with JsZipUtils in NPM and React?

After installing JsZipUtils via NPM, I attempted to import it using the following code: import JSZipUtils from 'jszip-utils'; However, I encountered an issue where the file could not be found. The documentation also does not provide guidance on ...

reactjsnpmimporterrorjszip

what strategies can be implemented to prioritize addressing validation errors in return forms

I'm currently working on a web application in asp.net mvc-5, and I have a contact form displayed in the middle of the Contact Us view. Here's the code snippet: <div class="col-sm-8 col-sm-push-4"> <h2>Contact Us1 ...

javascriptjqueryhtmlasp.net-mvcrazor

Determining the position coordinates of an element in relation to the viewport using JavaScript, regardless of its relative positioning

I am currently developing a vueJs web application and I'm in need of determining the position of an element within my web app relative to the viewport itself, rather than its parent elements. I'm curious if there exists a function or property tha ...

javascriptcssvue.jsvuejs2

Could someone kindly clarify the workings of this jQuery script for me?

I found this code online, but I'm struggling to comprehend its functionality. In order to make any edits for my needs, I need to understand how it operates. The purpose of this script is to close a panel with an upward slide animation when the "x" but ...

javascriptjqueryhtml

JavaScript/CSS manipulation: The power of overriding animation-fill-mode

When animating text using CSS keyframes, I use animation-fill-mode: forwards to maintain the final look of the animation. For example: #my-text { opacity: 0; } .show-me { animation-name: show-me; animation-duration: 2s; animation-fill-mod ...

javascriptjquerycss

Position the SVG next to the link text in a Bootstrap navbar brand

I am using the .navbar-brand class from Bootstrap to include an SVG in my navbar. However, I want to display text next to the SVG and align it properly. The SVG and text are currently in the navbar but they are not aligned correctly. Below is the code snip ...

htmlcsstwitter-bootstrapsvgnavbar

Having issues with AngularJS where ng-table/ng-repeat rows are failing to load properly

I've been following a tutorial on using ng-Table, which can be found Here. When I download the example from Git, it loads without any issues. However, when I try to replicate even the simplest example myself, the column headers and filters load but th ...

javascripthtmlangularjsangularjs-ng-repeatngtable

Tips for correctly setting object initial values in React CreateContext

How can I correctly define the initial value of the constance trainsDetails in React Create Context? The trainsDetails is an object with various properties, fetched as a single object from an endpoint and has the values specified below in the TrainsDetails ...

reactjstypescriptreact-context

eliminate several digits past the decimal place

I thought this would be a simple task, but I'm completely stuck with the code I currently have! https://i.sstatic.net/Y36Cg.png render: (num) => { return <span><b>{num.toFixed(2)}</b>%</span>; // rounding to two de ...

javascriptreactjsantd

Adding text on top of an image

I am having trouble with the master slider plugin as slide1, 2, and 3 each have unique classes. I attempted to overlay text on the image but it is not showing up. I tried using the following CSS code but nothing appeared on the screen. .classnameslide1: ...

htmlwordpresscss

Adjustable textarea with automatic height based on content and line breaks

Imagine you have a textarea with text that includes line breaks. If you style it like this: textarea { height: auto; overflow: hidden; resize: none; } Upon loading the page, the textarea will only adjust its height based on the content until it enc ...

javascripthtmlcss

How can you employ the ternary operator within a JSX tag for an attribute?

I have an unusual question that I haven't seen addressed before. When trying to conditionally render a classname with JSX, the method typically looks like this: <input {...input} type={type} className="form__input" classname={boolean ? "boo" : ...

reactjsjsx

Errors in TypeScript Compiler for using react-bootstrap in SPFx project

After setting up an SPFX Project with Yeoman generator and including react-bootstrap as a dependency, I encountered errors when using react-bootstrap components and running gulp serve. The error messages are as follows; does anyone have any solutions to ...

reactjstypescriptsharepointreact-bootstrapspfx

Optimize Material-UI input fields to occupy the entire toolbar

I'm having trouble getting the material-ui app bar example to work as I want. I've created a CodeSandbox example based on the Material-UI website. My Goal: My goal is to make the search field expand fully to the right side of the app bar, regar ...

javascripthtmlcssreactjsmaterial-ui

Having trouble with submitting a form using @submit in Vue 3

I am facing an issue with the vuejs @submit.prevent feature in my login form. When I click the login button on my website, it does not work as expected. Even after adding a catch error in the function, the console still shows nothing. Can someone please as ...

htmllaravelvue.js

The W3C Validator has found a discrepancy in the index.html file, specifically at the app-root location

While attempting to validate my HTML page, I encountered the following error: Error: Element app-root not allowed as child of element body in this context. (Suppressing further errors from this subtree.) From line 4347, column 7; to line 4347, column 16 ...

javascripthtmlangulartypescript

Dealing with CSS Overflow Issues: Fixing the Scroll Bug

My current project involves creating a page with fixed links at the top and submit buttons at the bottom. The content in the middle is scrollable using overflow:auto. I've noticed that when I resize the browser window, the scrollbar slowly disappears ...

css

Setting the state for an array of objects in React: a comprehensive guide

Suppose I have an array of objects representing people and their powers like so: const [peoples, setPeople] = useState[ {name: 'Sam', power: 0}, {name: 'Tam', power: 0}, {name: 'Lam', power: 0}, {name: ...

reactjs

Manipulating JSON objects within a map using jQuery and Gson

I am working with a Java object that contains several nested object fields with basic fields in them. Here is an example: Template { String name; EmailMessage defaultEmailMessage; } EmailMessage { String emailSubject; String emailBody; } ...

javascriptjqueryhtmljsongson