Skip to content
Advertisement

How can I resize element to fit its parent element?

I want to place the <input> element inside <td> without the <td> element being resized.

These are my CSS codes:

td {
  border: 2px dashed Silver;
  border-radius: 5px;
  width: 110px;
  height: 55px;
}

td:hover {
  cursor: pointer;
}
.seatLabel {
    max-width: 100%;
    max-height: 100%;
}

My JavaScript codes:

this.body = document.createElement("td");
this.body.innerHTML = "<input type='text' class='seatLabel'>"

I’m using this.body because these two codes are inside the class constructor.

How can I solve this problem?

I tried to use max-width and max-height, but they aren’t working.

Advertisement

Answer

Try to give your input position:relative, and width:100%. So, it will automatically resize to the remaining width in the td element.

User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement