What is the method to merge elements of unique and predefined dimensions in HTML?

The code below showcases a 300*300 px box with a footer that adjusts its height based on the contents of the green box. The content in the green box is editable, allowing users to input text and automatically increase the height of the footer (marked in red).

let img = document.getElementById("img");
img.src = "https://www.svgrepo.com/show/117819/microphone.svg"

document.getElementById("checkbox").onchange = (event) => {
  if (event.target.checked) {
    img.style = "display: block;"
  } else {
    img.style = "display: none;"
  }
}
.wrapper {
  height: 300px;
  width: 300px;
  outline: solid;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 3em;
}

.footer {
  width: 100%;
  height: min-content;
  outline: solid pink;
  display: flex;
}

.child1 {
  width: min-content;
  height: min-content;
}

.child1>div {
  width: 100px;
  min-height: 80px;
  background-color: green;
}

.child2 {
  flex-basis: 100%;
  flex-shrink: 1;
  flex-grow: 0;
  height: 100%;
  background-color: red;
  
  display: flex;
  justify-content: center;
  overflow-x: clip;
}

.child2>img {
  height: 95%;
}
<div class="wrapper">
  <div class="footer">
    <div class="child1">
      <div contentEditable></div>
    </div>
    <div class="child2" contentEditable>
      <img src="microphone.svg" id="img" style="display: none;">
    </div>
  </div>
</div>

<input type="checkbox" id="checkbox">

If you check the box, a large microphone icon will appear within the red box. The challenge is to implement this without affecting the ability of the footer to expand based on the green box's content.

https://i.sstatic.net/I3gMP.jpg

How can I achieve this outcome without disrupting the footer's dynamic resizing behavior according to the green box's content?

htmlcsslayoutflexboxintrinsic-content-size

Answer №1

To maintain the integrity of the layout, it is essential to position the image absolutely.

let img = document.getElementById("img");
img.src = "https://www.svgrepo.com/show/117819/microphone.svg"

document.getElementById("checkbox").onchange = (event) => {
  if (event.target.checked) {
    img.style = "display: block;"
  } else {
    img.style = "display: none;"
  }
}
.wrapper {
  height: 300px;
  width: 300px;
  outline: solid;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 3em;
}

.footer {
  width: 100%;
  height: min-content;
  outline: solid pink;
  display: flex;
}

.child1 {
  width: min-content;
  height: min-content;
}

.child1>div {
  width: 100px;
  min-height: 80px;
  background-color: green;
}

.child2 {
  flex-basis: 100%;
  flex-shrink: 1;
  flex-grow: 0;
  height: 100%;
  background-color: red;
  
  display: flex;
  justify-content: center;
  overflow-x: clip;
  position: relative;  
}

.child2>img {
  position: absolute;
  top: 5%;
  height: 90%;
}
<div class="wrapper">
  <div class="footer">
    <div class="child1">
      <div contentEditable></div>
    </div>
    <div class="child2">
      <img src="microphone.svg" id="img" style="display: none;">
    </div>
  </div>
</div>

<input type="checkbox" id="checkbox">

Answer №2

To prevent the icon from stretching the footer and allow it to adjust its size based on available height, a simple solution is to set the height to 0 and then apply a min-height property. (You could also consider adding a max-width)

.child2>img {
  height: 0;
  min-height: 95%;
}

See the demonstration below:

let img = document.getElementById("img");
img.src = "https://www.svgrepo.com/show/117819/microphone.svg"

document.getElementById("checkbox").onchange = (event) => {
  if (event.target.checked) {
    img.style = "display: block;"
  } else {
    img.style = "display: none;"
  }
}
.wrapper {
  height: 300px;
  width: 300px;
  outline: solid;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 3em;
}

.footer {
  width: 100%;
  height: min-content;
  outline: solid pink;
  display: flex;
}

.child1 {
  width: min-content;
  height: min-content;
}

.child1>div {
  width: 100px;
  min-height: 80px;
  background-color: green;
}

.child2 {
  flex-basis: 100%;
  flex-shrink: 1;
  flex-grow: 0;
  height: 100%;
  background-color: red;
  display: flex;
  justify-content: center;
  overflow-x: clip;
}

.child2>img {
  height: 0;
  min-height: 95%;
  /* & eventually*/
  max-width:95%;
}
<div class="wrapper">
  <div class="footer">
    <div class="child1">
      <div contentEditable></div>
    </div>
    <div class="child2" contentEditable>
      <img src="microphone.svg" id="img" style="display: none;">
    </div>
  </div>
</div>

<input type="checkbox" id="checkbox">

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

Several buttons, each requiring to show distinct text

Currently, I am attempting to enhance an existing project that was graciously created for me. I must admit, I am quite new to this, so please be patient with me! In my project, there are 9 buttons, each triggering the display of a different image upon bei ...

javascriptjquerycssonclickreactjs

What is the best way to detect input events from the Stripe cardElement to determine if a card is invalid and then proceed to disable the button?

While my user fills out the form with order information and customer details, I ensure that the submit button remains disabled until all validations are met. The library being used for this purpose is express-validate. In addition to the current setup, I ...

javascripthtmlformsvue.jsstripe-payments

Is there a way to display a Bootstrap popover for a button when another button is clicked?

Is there a way to manually display popovers instead of triggering them on element click events? Below is an example code snippet featuring two buttons: Click me: displaying popover upon clicking. (this should not occur) Show click me popover: intended ...

javascriptjqueryhtmltwitter-bootstrap

What is the best way to save a JavaScript object or JSON within an HTML element using the HTML5 data attribute?

I have an anchor element and I want to store and retrieve the object within it in this specific format. <a id ="test" data-val="{key1:val1,key1:val1}"> </a> When saved in this manner, fetching it with $("#test").data('val') returns ...

javascriptjqueryjsonhtml

Manipulating CSS Class Properties Using JavaScript

In my JavaScript application, there is a functionality that loads a list of items for users to click and view detailed information in a separate div on the page. Users should be able to interact with and make modifications to these individual item overview ...

javascriptcsstypescriptless

Have you ever wondered why Vue 3 imports all JS files for every page upon the initial project load?

Is there a way to make Vue 3 import only the necessary js files for each component instead of loading all files at once when the project is first loaded? For example, if I navigate to the contact page, Vue should only import the contact.js file, rather tha ...

javascripthtmlvuejs3

Is there a way to set the <hr /> tag to display vertically?

Is there a way to make the <hr /> tag go in a vertical direction rather than appearing horizontally as it normally does? I am looking for a solution that can be used on a mobile site with broader compatibility across browsers, rather than relying on ...

javascripthtmlcss

Ensuring Navigation Elements Remain Aligned in a Single Line

I'm in the process of developing an interactive project that will be showcased on a touch screen. One of its key features is a fixed footer navigation. Currently, I am using floats to position the main navigation elements and within each element, ther ...

htmlcsscss-float

Can I create a personalized datepicker without relying on Angular Material or Bootstrap?

Looking to create a datepicker in Angular without relying on Angular Material or bootstrap, similar to the design shown in this image: https://i.sstatic.net/ujfDI.png Any ideas on how this can be achieved? Note: It's a business requirement. ...

javascripthtmlcssangularbootstrap-4

Angular textbox with dynamic concatenated name functionality

Hello, I'm currently working with some code that looks like this: <div *ngFor="let phone of phoneList; let phIndx = index;"> <div class="peoplePhoneTxtDiv"> <input [disabled]="phone.disabled" class="peoplePhoneTxtBox" type="text" ...

angularhtmltypescriptangular5

Unable to close Bootstrap modal upon clicking "x" or "close" buttons

Hey everyone, I'm having a bit of trouble with my modal. It appears correctly when clicked to open, and the close buttons seem to detect that my mouse is hovering over them. However, when I click on the buttons, nothing happens and the modal remains o ...

javascripthtmlbootstrap-4

What is the best way to align a badge icon regardless of the avatar's size?

I'm working on creating an avatar component with badges. However, I'm facing an issue with the positioning of the badges relative to the avatar size. The image below provides a clear illustration of the problem. Can you guide me on adjusting the ...

javascriptcssreactjssass

What is the best way to test out CSS effects before they go live

I enjoy customizing the CSS, like the posted dates on my portfolio How can I make these changes without affecting the public view of the website? One suggestion from a forum was to use .date {visibility:hidden;} ...

csswordpressdateweb

Stop the stream coming from getUserMedia

After successfully channeling the stream from getUserMedia to a <video> element on the HTML page, I am able to view the video in that element. However, I have encountered an issue where if I pause the video using the controls on the video element a ...

javascripthtmlhtml5-videogetusermedia

Does anyone else have a peculiar problem with css width?

Either I have been designing web pages for an extensive period of time without taking a break or something truly bizarre occurred. <div style="background-color:#0F0; margin:5px; height:5px;"></div> This will generate a lengthy bar with a 5-pi ...

csshtmlwidth

The interface distortion issue occurs when using a SurfaceView within a Dialog or an Activity with the Theme.Dialog applied

Trying to display a SurfaceView in an Activity with a theme extending Theme.Dialog (similar to displaying it in a Dialog class) is causing layout glitches. I am unable to capture a screenshot of the glitch as it disappears when I try to do so. However, th ...

androidlayoutdialogsurfaceviewvisual-glitch

Text overlaps when li element is nested inside another element

Seeking assistance in creating a CSS/HTML menu bar that triggers list elements on hover. Facing difficulty arranging the list in two columns. Code Sample:http://jsfiddle.net/Km922/1/ <!DOCTYPE html> <html lang="en"> <head> <meta ...

htmlcsshtml-listsmenubar

Transferring image data to a different webpage

Currently, I am facing an issue with obtaining image data from a camera and photo album on a mobile device. Although I have successfully retrieved the chosen image using the provided code snippet below, my dilemma lies in transferring this image data to an ...

javascriptjqueryhtmlimagemobile

Having trouble getting the navigation bar to appear in the upper right corner of the website

Currently, I am working on The Odin Project and trying to create a landing page. I have encountered an issue where my navbar is positioned on the left side when I want it to be on the right side. Here is the code I am using: .container{ width:100%; height: ...

htmlcssnavbar

Tips for creating animated arc fills using CSS

Can we gradually fill the color of a CSS semi-circle in a counterclockwise direction, similar to a progress bar? Here is the code for the semi-circle: https://jsfiddle.net/sonymax46/wqfovdjh/7/. .cc{ background-color: transparent; overflow: hidd ...

javascripthtmlcsssvg