Is it possible to stack a small div on top of another div and have the small div centered at the bottom? I want the layout to look like this: Style.
I've looked up solutions, but some suggest making the small div relative, which causes it not to stack properly. How can I make this work?
You can check out my sandbox to see the problem in action here: https://codesandbox.io/s/sweet-bas-grubn
When utilizing absolute positioning, it's important to remember to set the bottom to 0 and the left to 50%. Afterward, translate it left by 50% of the width.
style={{
position: "absolute",
backgroundColor: "white",
zIndex: 1,
height: "250px",
width: "40%",
bottom: 0, // <-- Positioned at the bottom of the screen
left: '50%', // <-- Aligned 50% from the left side of parent div
transform: 'translateX(-50%)', // <-- Moved left by 50% of child width
}}
Feel free to give this a try. Hopefully, it proves useful for your needs.
import "./styles.css";
export default function App() {
return (
<div
style={{
position: "relative",
background: "blue",
width: "100%",
height: "400px",
margin: "0px",
padding: "0px"
}}
>
<div
style={{
position: "absolute",
background:"white",
zIndex:1,
height:"200px",
width:"150px",
bottom:"0",
left:"40%"
}}
></div>
</div>
);
}
I recently embarked on a new project utilizing react-codemirror2 and react-jsonschema-form, very similar to the setup outlined in this link. However, I encountered an issue where all the JSON content loaded into my codemirror editor appeared on a single l ...
When using Redirect.Action.APP to redirect the user to another component on the admin side of my app, I encounter an issue where I am prompted to go through the authentication process again, ultimately landing me back at the start of the application. The c ...
Having some trouble understanding this issue. Currently incorporating the CSS modules built into Nextjs for my components. Whenever I try to lazy load a component with a CSS module, I encounter the error CSS Modules cannot be imported from within node_modu ...
Want to save a token and access it using local storage The code snippet I am using is: if (typeof window !== 'undefined') { localStorage.setItem(key, value) } If I remove the window type check, I encounter this error: localStorage is not ...
I am encountering an issue with the code provided below, which is a simplified version of a larger problem. Can you explain why, if: .div_A {z-index: 10;} < .div_C {z-index: 20;} the button inside div_C appears behind div_A? I need to understand the ...
Increasing the Width of a Temporary Drawer in Material-components-web Greetings! I am currently facing an issue with Material-components-web In the provided demo here, I would like to extend the width of the Temporary drawer to accommodate additional co ...
Check out my code snippet for a responsive image display: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>xxxxx</title> < ...
I am facing an issue with the border of a table. Currently, the border appears correctly on Brave browser but extends too far on Chrome and Safari. If I try to make it smaller, the border does not reach all the way to the <td>. Is there a solution to ...
Working on a homepage using Bootstrap 4 with a navigation bar fixed to the bottom and a carousel above it. It looks good on desktop/tablet, but facing issues on mobile views. There's an unwanted white space between the carousel and the navigation on ...
I recently made some changes to my index.js file: const express = require('express'); const path = require('path'); const generatePassword = require('password-generator'); const fetch = require('node-fetch'); const ...
Appreciate your help in advance. I am facing a challenge with the current layout. <article> <section class="content">1</section> <aside class="ads">2</aside> <section class="comments">3</section> < ...
I created a form with an input field that captures the user's mobile number and validates it to ensure it begins with '0'. The validation process is functioning correctly, but I am encountering a problem when submitting the form. Even if the ...
Here is the output of my JSON data I am using the Map function in ReactJS to display elements from a JSON array. I have attempted the code below and encountered an error stating "Cannot read property '_currentElement' of null." Can someone pleas ...
My goal is to design a sleek black dashboard, so I acquired a CSS stylesheet that should give my dashboard a black theme. Following the instructions, I created an assets folder in the root directory of my app and added my CSS and JavaScript files there. Da ...
After upgrading my React version from 17 to 18, I encountered an error with this code: data?.area?.width=['111','220']. The error message states "The left-hand side of an assignment expression must be a variable or a property access." W ...
Currently working on creating a footer that includes social media icons from Font Awesome. However, I've come across an issue where resizing the desktop size for tablet or mobile screens causes the icons to shrink, which is not ideal. If anyone has a ...
Initially, I imported a basic "database" object from another file that contains an array of students. I then used map to iterate through the student array and display all the students on the window object. Everything was working fine until I attempted to ...
I've been experimenting with creating a floating menu using SMINT. The idea is to have the menu stay visible as you scroll down the page. The issue I'm facing is that the current menu structure uses divs. I would like to switch to using li and ...
Utilizing Vue makes it simple for me to incorporate a Vue application as a container above the server-side rendering HTML like so: <body> <div id="appMain"> <!-- This serves as the primary element for Vue --> <!-- ...
Currently developing a project using React, Babel, and Webpack on the front end. Need to find a secure way to store and access API keys for the project. Considering storing API keys in the .env file, which is listed in .gitignore to keep it private. Howe ...