Dynamically added input field increases width of container

user_9547684 0
Viewed 51

I have a tab with heading. I want to make it editable when the user double click on it. So currently i hide the div with heading and replace it by adding a input element dynamically. When i add the input element dynamically the size of the header-wrapper div increases. I want my dynamically added input take same size as that of the heading element(which is hidden now). And the size of the wrapper div should remain same. I have tried a solution with js. But i am looking a solution purely using CSS. Could this use case be achieved using css alone. I want my header-wrapper to be fluid and not of fixed width. I just want my input to take same width as that of div with class head. Input should take same width and size as that of head width.

function dblClickHanlder(){
  console.log("dbl click handler called");
  let inputEl = document.createElement("input");
  inputEl.style.display="inline-block";
  let headEl = document.querySelector(".head");
  headEl.style.display="none";
  document.querySelector(".header-wrapper").appendChild(inputEl);
  inputEl.focus();
}
* {
    box-sizing: border-box;
}
.wrapper{
  border: 1px solid black;
  display:flex;
  flex:1 0 auto;
}
.header-wrapper{
  display: flex;
  border: 1px solid red;
}
<div class="wrapper">
  <div class="header-wrapper">
    <div ondblclick="dblClickHanlder()" class="head">Heading</div>
 </div>
</div>

flexbox css html
2 Answers

you can get previous width and height of head element before removing it and set to newly created input;

  inputEl.style.width = headEl.offsetWidth + "px";
  inputEl.style.height = headEl.offsetHeight + "px";

check the snippet below: 

function dblClickHanlder(){
  console.log("dbl click handler called");
  let headEl = document.querySelector(".head");
  let inputEl = document.createElement("input");
  inputEl.style.width = headEl.offsetWidth + "px";
  inputEl.style.height = headEl.offsetHeight + "px";
  headEl.style.display="none";
  document.querySelector(".header-wrapper").appendChild(inputEl);
  inputEl.focus();
}
* {
    box-sizing: border-box;
}
.wrapper{
  border: 1px solid black;
  display:flex;
  flex:1 0 auto;
}
.header-wrapper{
  display: flex;
  border: 1px solid red;
}
<div class="wrapper">
  <div class="header-wrapper">
    <div ondblclick="dblClickHanlder()" class="head">Heading</div>
 </div>
</div>

user_59536100

Just add the following class to your CSS:

.header-wrapper input {
  max-width: 50px;
}

Below is the working example:

function dblClickHanlder() {
  console.log("dbl click handler called");
  let inputEl = document.createElement("input");
  inputEl.style.display = "inline-block";
  let headEl = document.querySelector(".head");
  headEl.style.display = "none";
  document.querySelector(".header-wrapper").appendChild(inputEl);
  inputEl.focus();
}
* {
  box-sizing: border-box;
}

.wrapper {
  border: 1px solid black;
  display: flex;
  flex: 1 0 auto;
}

.header-wrapper {
  display: flex;
  border: 1px solid red;
}

.header-wrapper input {
  max-width: 50px;
}
<div class="wrapper">
  <div class="header-wrapper">
    <div ondblclick="dblClickHanlder()" class="head">Heading</div>
  </div>
</div>

user_76390340
Related