Row height increases when going into edit mode

[Jeremy]

Hi

I am using the demo here to create a grid where the user can do batch updates with double-click inplace editing. Is there some way to remove the extra padding when the textbox is displayed? The problem is the textbox for editing is 19px high, while the label for display is 15px high and this 4px difference causes the row to "bounce" when going into/out of edit mode. This behaviour is also in the demo.

I have tried removing the padding at runtime with jquery in the ShowColumnEditor() function and re-adding it in the HideColumnEditor() function without luck. I can get rid of the bounce by setting the ItemStyle to 29px, but this makes the grid too spaced out and not as attractive.

I am using Internet Explorer 8 and the Vista skin.

Thanks!

[Dimo]

Hello Jeremy,

Removing the editedCell's top and bottom padding works OK on my side and the rows does not increase its height. Please check your implementation.

function ShowColumnEditor()
{
      editedCell = this;
      //........
     editedCell.style.paddingTop = 0;
     editedCell.style.paddingBottom = 0;
      //.......
}

An alternative approach is to add/remove a custom CSS class. In this way you don't have to know what is the original cell padding.

function ShowColumnEditor()
{
      editedCell = this;
      //........
     editedCell.className = "noPadding";
      //.......
}

.noPadding
{
        padding-top: 0 !important;
        padding-bottom: 0 !important;
}


Greetings,
Dimo
the Telerik team

[Jeremy]

Thanks! The first method worked! I was mistakenly trying to get the TD or TR from the editedcell and apply the styles to that. Also the alternative approach doesn't seem to do anything.