100VH Header Container Safari Issue

[kickinrad]

Heya, having a bit of an issue with my Pro header.

Someone let me know it was goofing off on IOS, and it seems to be having some issue with the 100VH bar and WebKit which is fairly common. I tried this quick fix as a CSS class on my bar:

height: 100%;
height: -webkit-fill-available !important;

It actually works great on Safari, but I have to set the height in Cornerstone to auto and it is a bit wonky in Chrome now. I think there is probably a CSS hierarchy fix here somewhere, but I can’t quite figure it out. Maybe you all have some better insight at an easy way to fix this.

Let me know if you need any more information.

[ruenel]

Hello @kickinrad,

Thanks for writing in!

Please remove your custom CSS. What you can do is to set the height of the Bar element to auto and then in your Container > Size option set the minimum height to 100vh.

Hope this helps. Kindly let us know.

[kickinrad]

Hmmm, I had considered that as an option, but I have several containers inside that bar. Is there any other way to fix this? The different containers are important for my layout.

[friech]

Hi @kickinrad,

If you cant set the 100vh on the container, then set it on the Bar, the bar has a height controls too, there is no need for custom CSS.

Thanks,

[kickinrad]

Errrr, as I just said in my last reply, I have multiple containers inside that bar that I need for my layout to function.

Is there not another way? I don’t want to rebuild the entire header just because of this change, it was working fine when I built it.

[ruenel]

Hello @kickinrad,

Your only option is to update your custom CSS which you have presented in your original post. Make sure to add a minimum height of 100vh with the maximum height of none so that the contents will not be cut off.

• https://www.w3schools.com/cssref/pr_dim_min-height.asp
• https://www.w3schools.com/cssref/pr_dim_max-height.asp

Hope this helps.