How to add 10px empty space in the Angular UI Grid column?

Question

The Float Text from the previous column is Right aligned and the Text on this column is left aligned. These are the properties from the Angular UI Grid. For readability, I need to add a 10px space in the beginning of the Text for one of the columns.

Example: If the Text is "ABC",i have to display like " ABC"

I have below code.

{
    name: 'BldgScheme',
    field: 'BldgScheme',
    width: 100,
    cellTemplate: '<div  ng-if="!row.entity.editrow">{{COL_FIELD}}</div><div ng-if="row.entity.editrow"><input type="text" style="height:30px" ng-model="MODEL_COL_FIELD"</div>'
}

While reading the data from WebAPI, I can add SPACE(2). But How can I do that without changing the Web API code?

Answer 1

cellTemplate: '<div  ng-if="!row.entity.editrow"><div ng-if="COLUMNHEADVALUE" style="padding-left: 10px">{{COL_FIELD}}</div>{{COL_FIELD}}</div><div ng-if="row.entity.editrow"><input type="text" style="height:30px" ng-model="MODEL_COL_FIELD"</div>'

The code above should help was unsure which column needs to have this applied, so placed 'COLUMNHEADVALUE'. if for instance your columns are named 1, 2 ,3 etc then use ng-if="column value === 1"

keep in mind that the if statement must be true (else wont be shown), and only true for 1 instance.

hope this helps :p