I'm struggling to center this block. Here's the code:
Here is the CSS:
.login__body {
display: block;
text-align: center;
border: 1px solid lightgrey;
width: 400px;
height: 600px;
}
And here is the code snippet:
import React from 'react';
import './App.css';
function LoginBody() {
return (
<div>
<div className="login__body">
<h1>Hello</h1>
</div>
</div>
);
}
export default LoginBody;
If you want to center the element within its parent, simply use display: flex!
function LoginBody() {
return (
<div className="login__container">
<div className="login__body">
<h1>Hello</h1>
</div>
</div>
);
}
Here's how it can be implemented in the CSS file:
.login {
width: 100%;
height: 100vh;
position: relative;
&__container {
display: flex;
justify-content: 'center';
align-items: 'center'
}
&__body {
// ...
}
}
By using this method, your .login__container element will take up the entire page and centrally align its child (.login__body) both horizontally and vertically. For more information on the flex property, refer to the documentation here; alternatively, you can find a comprehensive guide on flex from CSS Tricks here.
Looking to tackle this pattern with the react-easy-state library: I have a pair of stores each containing a single string, like so: filter = store({ search : "" }) backendFilter = store({ search : "" }) I want the search value in backendFilter to ...
Encountering an issue with the map function. generateRows: function() { var cols = this.props.cols, // [{key, label}] data = this.props.data; Getting an error in retrieving data as it returns undefined value. return data.map(function(i ...
I have a form that consists of three fields: a textbox, a textarea, and a file input. The textbox and textarea are required fields, while the file input is optional. Currently, I am using react-hook-form, zod, and zodResolver. Although I have set the fil ...
I have a dilemma involving 10 images located in my public directory that I need to use in a component. Instead of individually importing each image like this: import imgurl1 from "../../public/celsius.gif"; import imgurl2 from "../../public/ ...
Looking to change the body background using a jQuery script. The goal is to scale the background image to fit the browser window size. I've come across a script called , but it seems to affect the class img and not the background-img. Any suggestions ...
This is the code snippet I am working with: <tr> <td class="demo"> <label>nemo#2 Gender</label> <select id="custG2" required="required"> <option>....</option> <option>M</option> ...
I'm encountering a slight issue with what seems like an easier question: My angular object is structured as follows: $scope.questions = [ { questionText: "1. This is a test question#1", choices: [{ id: 1, text: "NO", ...
https://i.sstatic.net/PL30l.png Struggling to achieve a TextField select with outlined variant and a see-through border. Here's the current theme override I'm using: overrides: { MuiOutlinedInput: { root: { backgroundColor: &ap ...
I am trying to implement a jQuery function to toggle the visibility of two elements. I want the button text to switch between "hide text" and "show text" when clicked, while toggling the visibility of the text itself. I have managed to change it once, bu ...
My attempt at this design: https://jsfiddle.net/j75hxxa2/1/ The goal is to have the block positioned on the right side and eliminate the extra gray area. By applying float: right; To the parent element, the child elements become very small. Trying ...
While browsing this thread, I came across a solution advising the use of Akamai-based configuration, which is not suitable for my hosting setup. In my React/Next.js project, my package.json contains the following scripts: "scripts": { "de ...
I am currently working on a project that requires admin privileges to add new users. Within the ADD NEW USER form, I have included a select box for Designation that is populated from the database. My goal is to display an error message if the user fails t ...
I am working on an Angular 1.x application (using ES5) where I need to display formatted CSS and JS code for the user to copy and paste into their own HTML file. The code should include proper indentations, line-breaks, etc. Here is a sample of the code: ...
My Chrome Extension contains a feature that displays Link Previews of the current active tab, but there is a noticeable delay as it calls an API to render the preview. To improve user experience, I want to optimize this process by prerendering all tab URLs ...
I am struggling with creating an HTML table from a dynamic nested JSON data structure. Despite my limited knowledge of data manipulation, I attempted various methods without success. The required data is missing in the output. JSON data... https://i.ss ...
I am currently navigating my way through Bootstrap and jQuery as a newbie, attempting to incorporate a modal window into my sales website. To visualize how it would appear in my project, I took the modal code from https://getbootstrap.com/docs/4.3/componen ...
I have integrated a datepicker using the library "@mui/x-date-pickers/DatePicker". import { DatePicker } from "@mui/x-date-pickers/DatePicker"; import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; import { Locali ...
I have successfully developed an API using Node.js for file uploads, which is functioning properly with Postman. In Next.js, I created a form specifically for uploading Excel files. Although I can view the selected files in the console, I am facing issues ...
A function was created using react-three-fiber to display a butterfly loaded from a glb file with animation. The butterfly is enclosed in a primitive object passed as a prop. The structure is as follows: the butterfly is nested in a mesh, which is nested i ...
I'm currently working on a menu item and have run into an issue with the information being displayed for the second level submenu (letters). Despite trying various join methods, I am unable to get the correct data - it either pulls only one of my subm ...