ui grid columns alignment issue in angular js

Question

In a ui grid in my application there are many columns . But when I try to display them all this what my grid columns look like :

The headers are not there but some how the values are there and it is being a big issue.

The Grid Options I have are ...

this.getGridOption = function (uiScrollOption, BestIndicatorParam, paginationPageSize, enableRowSelection, enableRowHeaderSelection,
    enableSelectAll, enableColumnResize, enableGridMenu, enableFiltering) {


    return {
        enableRowSelection: typeof enableRowSelection !== 'undefined' ? enableRowSelection : false,
        enableRowHeaderSelection: typeof enableRowHeaderSelection !== 'undefined' ? enableRowHeaderSelection : false,
        enableFiltering: typeof enableFiltering !== 'undefined' ? enableFiltering : false,
        enableSelectAll: typeof enableSelectAll !== 'undefined' ? enableSelectAll : false,
        enableColumnResize: typeof enableColumnResize !== 'undefined' ? enableColumnResize : true,
        rowHeight: 55,
        paginationPageSize: typeof paginationPageSize !== 'undefined' ? paginationPageSize : 5,
        paginationPageSizes: [5, 10],
        enablePaginationControls: false,
        enableVerticalScrollbar: 0,
        //enableHorizontalScrollbar: typeof uiScrollOption !== 'undefined' ? uiScrollOption : 0,
        enableHorizontalScrollbar:1,
        enableGridMenu: typeof enableGridMenu !== 'undefined' ? enableGridMenu : true,
        showGridFooter: false,
        columnDefs: this.columnDef,
        data: ''
    }
};

When I show 4-5 columns it is fine , but when I show them all this problem is annoying. What needs to be done. Please help.

Also I need to enable horizontal scroll bar . That's also not working.

I tried to give uiGridConstants.scrollbars.ALWAYS.

But did not work.

Can you provide us a Plunkr? Also, is this the issue what occurs in your situation? github.com/angular-ui/ui-grid/issues/963 — Matheno
– Matheno, Commented May 3, 2016 at 12:47

Sampath · Accepted Answer · 2016-05-03 15:42:09Z

1

You have to give column width as shown below.

columnDefs: [
                    {
                        name: app.localize('IplNumber'),
                        field: 'id',
                        width: 100,
                    },
                    {
                        name: app.localize('BrDateReceived'),
                        field: 'bpoHeaderPerformedForsOutput[0].dateReceived',
                        width: 140,
                    },
 ],

To enable Horizontal Scroll bar where you have to give it as shown below.

enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,

answered May 3, 2016 at 15:42

Sampath

66.2k70 gold badges327 silver badges461 bronze badges

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

Comments

craigcaulfield · Accepted Answer · 2018-06-02 13:28:36Z

0

Add width for each field in the columns definition with percentage. It will resolve the issue.

[ { name: app.localize('IplNumber'), field: 'id', width: 10% }, 
  { name: app.localize('BrDateReceived'), field:width: 15% }
]

Specify for all of your fields.

edited Jun 2, 2018 at 13:28

craigcaulfield

3,54810 gold badges37 silver badges46 bronze badges

answered Jun 2, 2018 at 10:27

rameshsriram

395 bronze badges

Collectives™ on Stack Overflow

ui grid columns alignment issue in angular js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related