Would it be possible to set the height of an overlay, with CSS if necessary?
I’m starting to use tabs, and when the size of the content on each tab varies, the tab control itself jumps up and down with every click, which is kind of unpleasant to use.
Actually I don’t even care if the overlay stays the same height - pinning the top of it in place would be just as good.
I think this may answer your question: another awesome tutorial by @Robert_Petitto: https://youtu.be/0f0jQmyZL0M.
What you’re probably looking for is at 9m20s into the video: sticky header. Let me know if that answers your question.
Thanks for the suggestion - I had followed Robert’s first video on tabs, but the second one looked like a lot of CSS for me! 
Of course, he makes it easy to follow along. The first step was switching the component from Tab container to Tabs to allow putting it in another container (although I wonder if that step was really necessary). Anyway, I made the tabs sticky, so they work as they do in the video if the particular tab has a lot of content. However, it doesn’t solve the issue with the size of the overlay window affecting the position of the tab selector - it still moves up and down as the overlay adapts to each tab’s content.
I still need to be able to force the overlay to be the same size, maybe by setting the size of a container within each tab?
I find the developer console pretty confusing and frustrating, but there are some things that have to be done with CSS I guess. Can anyone give the CSS for making containers or tabs a specified height? I don’t know if that would affect scrolling though - it would be bad if the user wasn’t able to get to the bottom of a tab that ended up with a lot of content.
If setting overlay or container heights isn’t possible, I’ll probably have to give up my preferred navigation setup - overlays.
Could you provide a screenshot or a screen recording to show what’s happening atm?
Here’s what it looks like
Easiest fix: just add a bunch of separators (set to large) to the containers/tabs, so that they will always have at least a minimum height equal to the overlay window. Nicer fix would be using css: min-height property, but the separators should work.
Yeah, I tend to use extra spacers at the bottom of the screen a lot. Especially when I have screens with a container that has a different color background. Seems that if I don’t add the spacers and the content on the screen is short, then I end up with a bunch of white space at the bottom of the screen which doesn’t look. I would agree that it should work well to fix the jumpy overlay as well. Hacky, but I’d go that route over CSS personally.
Thanks you two. Multiple separators did the trick.