Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
a month ago

The input element does not respond to the fit-content property.

The objective of my task is to resize the cells in a table with <td><input></td> created from an object[]. The inputs are used to modify the object's values directly from the table. However, the cell's width is static and doesn't depend on the length of the value text. I tried to use #data-table td input selector and set the max-width and min-width properties to fit-content, but it didn't work. It changed other styles, though - if I assigned a specific size to max-width, it worked correctly. The code to build the table is provided, and the example code is given with HTML tags enclosed in 
 tags.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
You can use the following CSS code to resize the cells in a table with <td><input></td> created from an object[]:

table {
  table-layout: fixed;
  width: 100%;
}

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

input {
  width: 100%;
}

The table-layout: fixed; property is used to set the table layout algorithm to fixed. This means that the table and column widths are set by the widths of table and col elements or by the width of the first row of cells. The width: 100%; property is used to set the width of the table to 100% of its container.
The overflow: hidden;, text-overflow: ellipsis;, and white-space: nowrap; properties are used to hide any overflow text in the cells and add an ellipsis (...) at the end of the text if it overflows. The width: 100%; property is used to set the width of the input element to 100% of its parent element.
You can also use JavaScript to dynamically resize the cells based on their content. Here's an example:

function resizeCells() {
  var cells = document.getElementsByTagName('td');
  
  for (var i = 0; i < cells.length; i++) {
    var cell = cells[i];
    var input = cell.getElementsByTagName('input')[0];
    
    cell.style.width = input.offsetWidth + 'px';
  }
}

This function gets all the <td> elements in the table and resizes them based on their content. It gets the first <input> element in each cell and sets the width of the cell to be equal to the width of the input element.
I hope this helps! Let me know if you have any other questions.
Sources
Excel VBA Resize Range - Automate ExcelResize a table by adding or removing rows and columnsjava - Auto resizing the JTable column widths - Stack OverflowResize Listobject Table dynamically with VBA - Stack OverflowHow to resize a table / ListObject in Excel, with VBA
avatar
Tolerim
a month ago
The reason your CSS rule is not working is that the input elements in the table have their max-width and min-width properties set to fit-content. This means that the width of the input element will be based on the width of its contents. In your case, the contents of the input elements are being set dynamically based on the data in your object array.
To make the width of the input elements depend on their content, you should remove the max-width and min-width properties from your CSS rule. You can also remove the id selector from your rule since you're targeting all input elements inside td elements within the data-table container.
Here's the updated CSS rule:

#data-table td input {
    width: fit-content;
}

This will make the width of the input elements in your table depend on their content.
;