AngularJS ui-Grid text alignment

Question

I created a ui-grid in a modal within angualr js. In the modal each tab has its own ui grid. For this Profile tab I have a grid and I want to align the column titles being modified and originals. I also want to align the content within the Originals column. I am new to this, so any help is appreciated.

Code for Profile.js:

var app = angular.module('serviceDesk.restroom-services.profile', []);

app.controller('ProfileCtrl', [ '$scope', '$http', function($scope, $http) {


$scope.gridOptions = {


        showGridFooter: true,
        enableHorizontalScrollbar: 0,
        showColumnFooter: false,
        enableFiltering: false,
        enableColumnMenus: false,
        enableGridMenu: false,
        columnDefs: [
                { field: 'empty', width: '33%', displayName: ''},
                { field: 'modified', width: '33%', displayName: 'Modified'},
                { field: 'original', width: '33%', displayName: 'Originals'},

        ],



        data: [{
                                    "empty":"Number of Employees(Daily)",
                                    "modified":"",
                                    "original":"20",

                                },
                                {
                                    "empty":"Customer Restroom Visits(Daily)",
                                    "modified":"",
                                    "original":"5",

                                },
                                {
                                    "empty":"Days Open per Week",
                                    "modified":"",
                                    "original":"5",

                                },
                                {
                                    "empty":"Number of Restrooms",
                                    "modified":"",
                                    "original":"2",
                                },
                                {
                                    "empty":"Number of Stalls",
                                    "modified":"",
                                    "original":"2",
                                },
                                {
                                    "empty":"Number of Urinals",
                                    "modified":"",
                                    "original":"2",
                                },
                                {
                                    "empty":"Delivery Frequency",
                                    "modified":"",
                                    "original":"Weekly Deliveries",
                                },
                                {
                                    "empty":"Billing Frequency",
                                    "modified":"",
                                    "original":"Monthly",
                                }
                               ],


        onRegisterApi: function(gridApi) {
                $scope.gridApi = gridApi;
            }
        };

$http.get("app/views/restroom-services/action/profile/profile.json").success(function(data) {
    $scope.gridOptions.data = data;
});


}
]);

Not sure if this is needed but here is the code for Profile.html:

<div ng-controller="ProfileCtrl">

<!--button for profile..
<div class="users-button-group">
    <button type="button" class="btn btn-aramark-primary btn-xs" ng-click="">Revert Profile</button>
</div>
-->

<div class="modal-body">
    <div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>

Can you make a plunkr with your code? This link will take you straight to the plunkr editor: plnkr.co/edit/?p=catalogue — Katana24
– Katana24, Commented Oct 30, 2015 at 19:44
@Katana24 having trouble having it run since I use bootstrap for this project... — Adrew
– Adrew, Commented Oct 30, 2015 at 20:13
@Andrew Can't you just add bootstrap as you would any other problem? — Katana24
– Katana24, Commented Oct 31, 2015 at 16:55

Adrew · Accepted Answer · 2015-11-03 18:03:45Z

3

I figured out the problem.

Here I have two divs within the html page:

<div id="gridTest" ui-grid="gridOptions" class="grid"></div>

<div id="grid1" ui-grid="gridOptions2" class="grid"></div>

Here I am set the text to align center so that the header text is centered:

#gridTest .ui-grid-header-cell .ui-grid-cell-contents{
text-align:center;
}

After all this the header row should be aligned to the center.

answered Nov 3, 2015 at 18:03

Adrew

2271 gold badge9 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LeOn - Han Li Over a year ago

Thanks. Note: in ui-grid 3.x, looks like the .ui-grid-header-cell is not there anymore. So the #gridTest .ui-grid-cell-contents is enough.

Collectives™ on Stack Overflow

AngularJS ui-Grid text alignment

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related