Make the content of a p-tabPanel fill available space?

UI Components for Angular
Post Reply
Silent3
Posts: 22
Joined: 07 Feb 2017, 17:19

23 Feb 2017, 06:00

I have something that's working, but it's hideous, so I'm hoping there's a better way.

I had to use all of this global styling:

Code: Select all

/deep/ p-tabview {
  position: relative;
  bottom: 0;
}

/deep/ .ui-tabview {
  position: relative;
  height: calc(100% - 38px);
  bottom: 0;
}

/deep/ .ui-tabview-panels {
  position: relative;
  border: 1px #D8D8D8 solid;
  top: 0;
  height: calc(100% - 35px);
  bottom: 0;
}

/deep/ .ui-tabview-panel {
  position: relative;
  height: calc(100% - 35px);
}

/deep/ .ui-tabview .ui-tabview-panel {
  padding: 0;
}

/deep/ .ui-widget-content {
  position: relative;
  padding: 0;
  height: 100%;
}

/deep/ .ui-tabview-panel > div {
  position: relative;
  height: 100%;
}
Plus this styling on my component:

Code: Select all

:host {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 100%;
}

:host div {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 100%;
}
Basically the problem was that I had to reinforce, going down every level of the DOM hierarchy starting from the .ui-tabview, that each level had to fill available vertical space. Miss one level and that level shrinks to minimum height. And I have to use kludgey calc'ed heights in a number of places or those elements take up too much vertical space, and my browser window sprouts an unwanted vertical scrollbar.

It seems like either I'm missing something or the idea of automatically stretching, window-filling tabbed content simply wasn't considered a likely (or desirable?) use case.

Silent3
Posts: 22
Joined: 07 Feb 2017, 17:19

23 Feb 2017, 07:55

I was able to simplify the CSS (well, SCSS really) by using flexbox, and stripping out stuff that was only in there because I'd been thrashing around trying a lot of different things, but was not really needed.

I'm still hoping, however, that there's something easier and cleaner that I'm missing.

The global CSS is now:

Code: Select all

/deep/ .ui-tabview {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

/deep/ .ui-tabview-panels {
  -webkit-flex: 1;
  flex: 1;
}

/deep/ .ui-tabview .ui-tabview-panel {
  padding: 0; // Only needed for my specific use case.
}

/deep/ .ui-widget-content {
  position: relative;
  padding: 0;
  height: 100%;
}

/deep/ .ui-tabview-panel > div {
  position: relative;
  height: 100%;
}
And for my component:

Code: Select all

:host div {
  position: relative;
  height: calc(100% - 4px);
  background-color: red; // Only using this background to visualize the real estate the component is consuming.
}
This works fine on Chrome and Firefox, but doesn't help at all in Safari. I haven't tried any other browsers yet.

Silent3
Posts: 22
Joined: 07 Feb 2017, 17:19

24 Feb 2017, 15:55

I've gotten better results (that even work in Safari) now by cutting out most of the CSS crap I'd tried before and simply receiving window resize events, then in script calculating and applying the view size that I want.

Yet still I can't help but think there's got to be a better way.

Then again, I found a related post from around 5 years ago about a similar issue using PrimeFaces, and that post never got a response, so perhaps the use case of tabbed content that automatically expands to fill available browser space isn't as common as I'd thought. If few people care about the issue, then maybe I'm on my own trying to cajole a PrimeNG-based app into doing this.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests