0

Using Angular & Bootstrap.

My ui-grid-viewport div is overflowing my ui-grid div.

I would like to have my ui-grid resize vertically to fit myui-grid-canvas as well as the horizontal scroll bar on

I believe this can be accomplished best with Javascript. Would my best bet be making a function that sets the height of ui-grid-viewport == ui-grid-canvas + 10px?

enter image description here

Thanks

Womble
  • 345
  • 3
  • 13
  • 1
    how do you now define the height of the grid wrapped element (the one with the black border). Depending on your page structure/style simply removing the height definition from the wrapper div might do the trick. In general, playing with element dimensions by yourself is not the best practice and should be used only when really needed. Your case seems like a job for css/html. – Vladimir M Sep 22 '16 at 18:26
  • 1
    I'm going to put my 2¢ in here and say that I would never design something this way because scroll bars look different across OS/browser. I'd look into making `.ui-grid-viewport` the same height as `.ui-grid-canvas` (real simple CSS) and then [work on a custom horizontal scrollbar](http://stackoverflow.com/a/14150577/703229). Bottom line: I agree with Vladimir that this is not a JS problem. – Sam Sep 22 '16 at 18:28
  • @VladimirM The wrapper `mount` is just `height: auto;` – Womble Sep 22 '16 at 18:35
  • @SensationSama ok. then how do you get that much spacing in it? You need to inspect elements of your page in dev tools and figure out, where the extra spacing coming from. – Vladimir M Sep 22 '16 at 18:48

1 Answers1

0

Vlad & Sam suggested that this is a possible fix in html/css.

Further exploration revealed that ui-grid and ui-grid-viewport were inheriting a height variable.

I was able to dynamically resize the container with the following code:

.ui-grid {
  height: auto !important;
}
.ui-grid-viewport {
  height: auto !important;
}

Thanks!

Womble
  • 345
  • 3
  • 13