0

I've ui-grid with 2 columns. Only 1st column is editable, when i try to edit it editableCellTemplate height doesn't fit with actual cell height(As shown in image). This bug only observed in IE, works fine with Chrome and Firefox. Is there any alternative to make it work.

enter image description here

editableCellTemplate is 

<form class="ui-grid-cell-edit" name=\"inputForm\">
    <input type=\"INPUT_TYPE\" ng-class=\"\'colt\' + col.uid\" ui-grid-editor ng-model=\"MODEL_COL_FIELD\">
</form>

Please check below link for example. Try to edit 'Description' column

http://jsfiddle.net/relly/p8d0qsas/

Update: IE version used

enter image description here

Pradeep
  • 2,530
  • 26
  • 37
  • Which version of IE? Why are you escaping some of your quote characters? Please provide a [minimal, complete and verifiable example](http://stackoverflow.com/help/mcve). You haven't even included any of your CSS – Phil Nov 07 '16 at 04:48
  • As i'm using this template inside js file escape characters are added. I'm not using any custom css for this "ui-grid-cell-edit" is ui-grid inbuilt css. – Pradeep Nov 07 '16 at 05:09
  • Can You provide a working Fiddle please ? – Ahsan Nov 07 '16 at 06:10
  • @Ahsan Fiddle example added try to edit 'Description' column and observe cell height after double click – Pradeep Nov 07 '16 at 10:42

1 Answers1

2

Looks like its a grid CSS issue get applied to textbox when user double clicks on grid column.

But you can override this CSS,

div.ui-grid-cell input{
  padding:5px;
}

Here is updated sample, try to edit 'Description' and 'Price' column http://jsfiddle.net/0arkssqy/3/

user3249448
  • 1,369
  • 2
  • 14
  • 34