0

update:

I am new in angular. I want to load paged data into ui.grid without vertical scrollbar. Suppose i have 100 data and my page size is 50. I want to display all 50 data into ui.grid without the right sided scrollbar. When page size set to 100, 100 data will displayed into the grid. I was able to remove scrollbar but the 50 data can't be displayed. Existing UI is the current view. but i want to remove the marked scroll bar from integrated ui.grid. Please help me out.

Thank you.

Debashish Halder
  • 11
  • 3
  • can you share you code? – Ananda G Dec 13 '17 at 11:39
  • http://ui-grid.info/docs/#/tutorial/213_auto_resizing. Knowing that, you can use something like this: https://stackoverflow.com/questions/31839031/get-element-parent-height-inside-directive-in-anguarjs. Knowing that, you can calculate the amount of data. You need to know the height of each row, and how much space you have in your parent elem. Then you can calculate what to tell the grid for the size. Also, think if you want to watch for resizes. – Brian Dec 13 '17 at 12:03
  • Actually i don't like the scrolling part into the grid. Without right sided scrolling bar i want to show all paged data into the grid. Other settings remain same as well as. – Debashish Halder Dec 13 '17 at 12:08
  • It's not pretty clear that what you are wanting to do here. So could you please share your code with some snapshot? Then, it will be more feasible to identify your problem. – Ananda G Dec 13 '17 at 12:19

1 Answers1

1

Some overridden style(css) help me this time. ui-grid-pagination and ui-grid-auto-resize are necessary for this.

Here is the code

.ui-grid-pager-panel
{   
    position:relative !important;
}

.grid, .ui-grid
{   
    height:auto;
}
.ng-isolate-scope
{
    height:auto !important;
    #overflow: scroll ;
}
.ui-grid-canvas{

    width:auto;
    height:auto !important;
}
.ui-grid-viewport{
    height:auto !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
}
.ui-grid-pager-container,.ui-grid-pager-count-container
{
    padding-top:5px;
}

I have solved it. here is the link.

Thanks

Debashish Halder
  • 11
  • 3