Row height increases when going into edit mode

3 posts, 1 answers
  1. Jeremy
    Jeremy avatar
    96 posts
    Member since:
    Mar 2010

    Posted 10 Nov 2010 Link to this post

    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!
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 11 Nov 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jeremy
    Jeremy avatar
    96 posts
    Member since:
    Mar 2010

    Posted 11 Nov 2010 Link to this post

    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.
Back to Top