Cell width quirks

[Vassi]

There's easy ways to control column width uniformly but it'd be nice to have a feature on the Cell for it to preserve its width when in edit mode. Because of browser quirks with how inputs are treated vs spans (which can easily size to their content width) even setting the input to 100% doesn't quite get your cell to look the same in edit mode and in input mode.

Again, to be clear, I'd like to be able to easily avoid the width juking between going into edit mode and input mode, like when you have no-wrap mode on.

My idea would be to have the Cell check it's width just before going into edit mode and set it manually, via style, and then remove it when out of edit mode. That would let the input, which is 100%, size appropriately. (or some other solution).

nbd if it's too small potatoes, we can do our own cell renderer afterall, but it would be a nice to have.

[annjawn]

This might help with maintaining the cell's width in edit mode.

.data-grid-container .data-grid .cell .value-viewer ,
.data-grid-container .data-grid .cell .data-editor{
   display: block;
   box-sizing: content-box;
   width: inherit;
 }

[rayventerprise]

Setting to context-box didnt help, hope this helps anyone else; this is what I did.

• removing the border from the input.
• make parent of the input "relative" position.
• set input to 100% width and height.
• set input to absolute.

Using TailwindCSS, you can use normal CSS however.

.data-grid-container .data-grid .cell > input {
    @apply w-full h-full top-0 text-center absolute border-none;
}

.data-grid-container .data-grid .cell.selected {
    @apply relative
}