Adjust the height of siblings based on the height of the contenteditable element(s)

I'm currently struggling with a situation that I can't seem to figure out.

Within a container (outer), I have three children. My goal is to resize the middle container (div) based on the height of the contenteditable area. All three containers should ideally "fit" within the outer-div.

<div id="outer"> //container

  <div id="contenthead" contenteditable="true">head</div>       
  <div id="content"> I am content </div> <!-- I should shrink or grow depending on the content editable -->

  <div id="contentend" contenteditable="true">end</div>

</div>

I've attempted to use a mutationobserver, as well as jquery ui, however, they only provide partially effective solutions. Sometimes events are not triggered or there's a slight loss in pixels.

Does anyone have a solution for this issue?

For further clarification, you can view an example on JSfiddle.

javascripthtmlcss

Answer №1

Utilizing Flexbox for the Layout:

#outer {
  width: 200px;
  height: 300px;
  border-style: dotted;
  border-color: black;
  border-width: 1px;
  display: flex;
  flex-direction: column;
}
#contenthead,
#contentend {
  background: pink;
}
#content {
  width: inherit;
  flex: 1;
  min-height: 200px;
  display: inline-block;
  border-style: solid;
  border-color: black;
  border-width: 1px;
}
<div id="outer">

  <div id="contenthead" contenteditable="true">head</div>

  <div id="content">I am content</div>

  <div id="contentend" contenteditable="true">end</div>

</div>

Answer №2

Ensure to utilize the display feature in this scenario

.table {display:table;border-collapse:separate;border-spacing:5px;}
.table-row {display:table-row;}
.table-cell {display:table-cell;padding:5px;border:1px solid black;}
<div class="table">
  <div class="table-row">
    <div class="table-cell">123</div>
    <div class="table-cell">456<Br />sdf</div>
    <div class="table-cell">879</div>
  </div>
</div>

This method is guaranteed to be beneficial for you.

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

Is it possible to conceal JavaScript comments on a page before it is displayed?

Curiosity has led me to ponder a question that may seem trivial. Consider this scenario: in my HTML or ASPX page, I include a comment for some JavaScript code. When the page loads, will the comments be rendered along with the rest of the page's conten ...

javascriptjqueryasp.nethtmlbrowser

Tips on invoking the kendo ui datasource read function from a Grid in React.js

I'm currently working with a Kendo UI Grid instance that is connected to a RESTful web service through an inline DataSource. To prevent the data from being pulled when the page loads, I have configured the "autoBind": false property of the Grid. Now ...

javascriptreactjskendo-uikendo-grid

Using React-router-dom's Link component can cause styling inconsistencies with material-ui's AppBar Button

Exploring the use of a material-ui Button with react-router-dom's Link is showcased here: import { Link } from 'react-router-dom' import Button from '@material-ui/core/Button'; <Button component={Link} to="/open-collective"> ...

javascriptreactjsbuttonreact-routermaterial-ui

Using React-router-dom's Link component will update the URL without actually loading a new component

I've been having trouble setting up nested routes with React Router. I put together a small example of what's not working here: https://codesandbox.io/s/silly-dubinsky-of2mu Essentially, I have two routes with a sub-route each: first/first and ...

javascriptreactjsreact-router

Tips for establishing default values in a form within the MEAN Stack framework

Just starting out with MEAN stack and Angular 6. Working on a web application using the MEAN Stack and looking to pre-fill default values in a form after clicking a button. In order to achieve this, I plan to create a function for the button that will acc ...

javascriptnode.jsangularmongodbmean-stack

Maintain the div's aspect ratio by adjusting its width according to its height

I am seeking a way to maintain the width of the .center div in relation to its height, following a 4:3 aspect ratio (4 units wide for every 3 units high). The height of the div should be set to 100%, and I also need to align the div horizontally at the cen ...

csshtmlheightwidth

Storing retrieved data from an Ajax request into a variable

Presented below is a function that utilizes Ajax: function fetchSource(callback){ var ajaxRequest; try{ ajaxRequest = new XMLHttpRequest(); } catch (e){ try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); ...

javascriptajaxvariables

Parallel mapping with simultaneous multiple inserts

I am working on inserting a list of topics with unique slugs into a MongoDB database. Here are two example topics: { title: "my title" }, { title: "my title" } After generating the slugs, I need to insert the topics: // Insert each topic async.map( ...

javascriptnode.jsmongodbasynchronous

Avoiding unnecessary white space when positioning HTML elements

I am working with two images, imgA and imgB. ImgA is 2000px high while imgB is 1000px high. After placing them one after the other, I use relative positioning to move imgB up in order to overlap imgA. Expectedly, the browser window should be 2000px high, ...

htmlcss

Display a hidden division when a radio button is selected using Javascript and Jquery

Currently, I am in the process of constructing a form that triggers a series of additional questions based on the selected answer. Below is my current working code snippet: $(".appliedWorked").click(function(){ if($(this).val()==="appliedWorkedYes") ...

javascriptjquery

Executing usemin and useminPrepare on various targets is made possible by Grunt

According to the usemin issues, it seems that the latest version of usemin and useminPrepare now support multiple targets: Updates related to multiple targets in useminPrepare: pull#162 pull#206 New features for usemin support: Multiple targets A ...

javascriptnode.jsgruntjsnpmgrunt-usemin

How can I resize and horizontally align an image using html/css?

Is it possible to resize, crop and center an image using only HTML/CSS? (Using the img tag or CSS sprite) For instance, if I have a 500x500 pixel image, I would like to resize it to a 250x250 pixel image To make the actual visible image 100x100 pixe ...

javascriptjqueryhtmlcss

Beginner's guide to resolving AngularJS data-ng-init binding issue

I have been learning from an AngularJS tutorial that can be found at this link : http://www.youtube.com/watch?v=i9MHigUZKEM Below is a snippet of the code I am working with: <html data-ng-app=""> <body data-ng-init="names=[{'John Smith&ap ...

javascriptjqueryangularjs

Can the parent document interact with Shadow DOM elements?

When it comes to user-created shadow DOM elements, this question focuses more on accessibility using the date input type: For instance, let's say there is a date input on a webpage. After some editing, the shadow DOM markup for this element (in Chrom ...

javascripthtmlweb-componentshadow-dom

Unlocking the Sound: Using a Custom Button to Activate Audio on HTML Video in React

While working on a project, I encountered a small issue: I have a video tag in my code: <video muted autoPlay loop src={video}> I simply want to add a single custom button/control to toggle between muting and unmuting the video. I'm thinking of ...

javascriptreactjs

Interconnected slider and numerical entry field both influencing a shared numeric value

My goal is to display the Slider Value "sliderStatus" in a number input box that can be adjusted using various methods. For instance, if the slider is set to 199 and the customer wants to quickly select 200, they can either input the value in the box or a ...

javascriptjqueryhtml

Tips for creating a unique custom UI headline using ReactJS, CSS, and bootstrap

Looking to create a design that is responsive in ReactJS using Bootstrap or CSS if needed. I need assistance with placing separators between columns and ensuring the values of each label are aligned in the same column but on the next line. The layout shoul ...

javascriptcssreactjsflexboxbootstrap-5

Is it possible to include a conditional statement in a variable declaration?

I need to increase the value of + 450 to var threshold only when the page is on body.home. Here's an example: var headHeight = jQuery('#masthead-space').height() + 23; var threshold = jQuery('.PopularTabsWidget').offset().top - ...

javascriptjquery

Leveraging external JavaScript libraries in Angular 2

Having some trouble setting up this slider in my angular2 project, especially when it comes to using it with typescript. https://jsfiddle.net/opsz/shq73nyu/ <!DOCTYPE html> <html class=''> <head> <script src='ht ...

javascriptangular

Simple JavaScript File Loading without Rendering or Running Laravel 8 Bootstrap 5

Hey there, I just set up a fresh laravel and bootstrap project. All I've done so far is create a navigation bar. However, when I load the page, I noticed that the app.js file is loading but the CSS is not rendering properly because the app.css stylesh ...

javascripthtmlcsslaravelbootstrap-5