What is the best way to enlarge the parent element while also enlarging the child element?

I have a situation where I need to ensure that two classes have elements of the same height. When the children element's height increases, the parent element should also increase in height.

The parent element has the class name .user-data and the children element has the class name .scheduleWorkingPeriodContainer.

.user-data {
    position: relative;
    float: left;
    box-sizing: border-box;
    min-height: 40px;
    align-items: center;
    text-align: center;
    border-left: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    background-color: white;
}

.scheduleWorkingPeriodContainer {
    position: absolute;
    z-index: 1;
    width: 100%;
    display: block;
    overflow-x: hidden;
    height: auto;
 }

It is essential that both the parent and children elements have the same class. Additionally, it is not possible to change the position property in either .user-data or .scheduleWorkingPeriodContainer due to external code constraints.

Any assistance would be greatly appreciated!

javascriptcss

Answer №1

According to a different response on this topic, it is not possible to adjust the height of a parent element based on an absolutely positioned element without specifying a fixed height or utilizing JavaScript.

To achieve this with JavaScript, you simply need to determine the height of your absolute child element .scheduleWorkingPeriodContainer and then assign that value as the height for the relative parent element .user-data.

Take a look at the following example code snippet for a practical demonstration of the concept I explained earlier. In this snippet, I increased the height of the parent element by 5px more than the height of its absolutely positioned child element to illustrate the additional height of the parent:

/* JavaScript */

var child = document.querySelector(".scheduleWorkingPeriodContainer");
var parent = document.querySelector(".user-data");

parent.style.height = parseInt(window.getComputedStyle(child).height) + 5 + "px";
/* CSS */

.user-data {
    position: relative;
    float: left;
    box-sizing: border-box;
    min-height: 40px;
    align-items: center;
    text-align: center;
    border-left: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    background-color: green;
    width: 100%;
}

.scheduleWorkingPeriodContainer {
    position: absolute;
    z-index: 1;
    display: block;
    width: 100%;
    overflow-x: hidden;
    height: auto;
    background-color: red;
 }
 html, body {width: 100%;height: 100%; margin: 0; padding: 0;}
<!-- HTML -->

<div class="user-data">
  <div class="scheduleWorkingPeriodContainer"><p>ABCD</p><p>ABCD</p><p>ABCD</p><p>ABCD</p>
  </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

There are critical vulnerabilities in preact-cli, and trying to run npm audit fix leads to a never-ending loop between versions 3.0.5 and 2.2.1

Currently in the process of setting up a preact project using preact-cli: npx --version # 7.4.0 npx preact-cli create typescript frontend Upon completion, the following information is provided: ... added 1947 packages, and audited 1948 packages in 31s 12 ...

javascripttypescriptnpmpreactpreact-cli

Custom Email Template for Inviting Msgraph Users

I'm currently exploring the possibility of creating an email template for the MS Graph API. I am inviting users to join my Azure platform, but the default email they receive is not very visually appealing. public async sendUserInvite(body: {email: < ...

javascripttypescriptnext.jsmicrosoft-graph-api

Handling Circular Dependency: Injecting a Service into an HTTP Interceptor in AngularJS

I'm currently working on developing an HTTP interceptor for my AngularJS application to manage authentication. Although the code I have is functional, I am wary of manually injecting a service as I believed Angular is designed to handle this process ...

javascriptangularjs

Encase the event handler within JQuery

Here's an example of inputs with OnBlur event handlers: <input name="abc" tabIndex="5" class="datetime" onblur="if (CheckMode(this))__doPostBack('abc',''); else return false;" /> Now, in JQuery Form ready function, I want ...

javascriptjquery

What is the process for assigning an element to a specific URL ID?

Imagine having an array of objects structured like this: [{ details: {id: 7}, type: minigame1, ...(more values that need to be accessed later) }, { details: {id: 8}, type: minigame1, ...(more values that need to be accessed later) }, { details: {id: ...

javascriptreactjs

The object for checking Ajax connections is not providing any values

I've been working on creating a unique AJAX connection check object, but unfortunately I'm struggling to get it to function properly. :/ Here's the object structure: function Connection(data){ this.isConnected = false, this.check = funct ...

javascriptjqueryajax

Concentrate and essential

I am encountering an issue with required inputs and the :focus styling on those inputs. When I try to submit empty values, the red border from the required styling appears and does not disappear when I click on the input. As a result, I end up with a stran ...

htmlcssfocusborderrequired

Pass along property to subsequent middlewares in Express

Within my express app, I have implemented auth middleware that identifies the current user based on the session ID. I am seeking a way to "persist" the user object and make it accessible to subsequent middlewares. I attempted attaching the user object to t ...

javascriptnode.jsexpress

``Is there a way to refresh the CSS, button, or a specific part of a webpage after a GET request has been

Upon receiving a GET request, the values appear and the button disappears. View image here. The button functions properly on localhost. See it in action here. I'm attempting to incorporate a Facebook share button on a page with dynamic content like ...

javascripthtmlcssajaxget-request

Guide on integrating a HemisphereLight into a basic Three.js environment

I've been experimenting with adding light to a simple scene in threejs, but no matter what intensity or color I set for the light, there is no visible change. Strangely, even when I exclude the light code altogether, nothing happens either. Why is Hem ...

javascriptgraphicsthree.jsscene

What is the best way to separate a string using a comma as a delimiter and transform it into a string that resembles an array with individual string elements

I am in search of a way to transform a string, such as: "one, two, three, four" into a string like: "["one", "two", "three", "four"]" I have been attempting to devise a solution that addresses most scenarios, but so far, I have not been successful. The ap ...

javascripttypescript

Ways to properly link a header according to industry standards

I am faced with a chunk of HTML structured as follows: <div id="header"> <h1>title</h1> <h2>subtitle</h2> </div> To conceal all the text content and substitute it with an image using CSS, I am trying to link th ...

htmlcssstandardsw3c

When refreshing the page, Angular 1.5.0 duplicates the root template while using UI GRID with ocLazyLoad. The error "$$animateJs is undefined" is displayed

I am currently using the following versions of libraries: Angular, angular-animate both are v. 1.5.0 Angular UI Grid v. 3.1.1 ocLazyLoad v. 1.0.9 Angular ui router v. 0.2.18 The Error encountered is: TypeError: $$animateJs is not a function at d ...

javascriptangularjsangular-ui-gridoclazyload

Switching the URL without reloading the page in NEXT.JS

Currently, I am in the process of building an ecommerce store using NEXT.JS and Redux. Within the product listing page, I have incorporated a sorting select dropdown featuring options such as Price Low to High, Price High to Low, and New Arrivals. My goal ...

javascriptreactjsnext.js

Converting a string path to a JSON parent-child tree with node js: A comprehensive guide

I've been attempting to transform an array of paths into a JSON parent-child tree using Node.js. I'm following the approach provided by @Nenad Vracar in this Stack Overflow post: link. Although I've made some modifications to the solution. H ...

javascriptnode.jsjsonecmascript-6treeview

What is the best way to call a JavaScript function with multiple arguments from a Silverlight project?

I encountered an issue when trying to invoke a JavaScript function with multiple arguments from an HTML page. Here is what I am attempting to do: wbNavigator.Navigate(new Uri("http://localhost:56433/route.html", UriKind.Absolute)); object results = wbNavi ...

javascripthtmlsilverlightinvoke

CSS transform causing scrolling issues in Microsoft Edge browser

Whenever I click a button, a div flips. Once flipped, the div contains a scrolling list. If the list is not long enough to scroll, everything works fine. However, if the list is long enough to require scrolling, the items disappear... This issue ...

htmlcssoverflowcss-transformsmicrosoft-edge

React: Issue with applying inline styles to child components

Goal: My objective involves dynamically resizing the textarea and its parent container based on the scrollHeight of the textarea within a Main component. I also have a Button component as a child of Main for clearing text from the textarea, though that is ...

javascriptreactjs

Is there a way to link code and unit testing directly to npm test?

Is there a method to conduct unit testing in real-time on my server without having to create temporary files? I am looking for a way to supply both the code to be tested and the corresponding unit test to npm test. The information provided in the npm test ...

javascriptnode.jsunit-testingnpm

Implementing the onClick function for the correct functionality in a ReactJS map component

I have designed a mockup and now I am trying to bring it to life by creating a real component. View my component mockup here Starting with something simple, I created 3 buttons and an array. However, when I click on any button, all features are displayed ...

javascriptarraysreactjs