Diving into Bootstrap and Font Awesome – Part 6: Fun with Panels 1
March 7, 2015
Posted by on
In part 2 of this series, I’ve enhanced the Bootstrap panel, adding properties, so, you can have a fixed height panel with scroll bar if needed.
You can set the height by using px, em and %. But what if you change the screen sizes or the panel is used on desktop, tablet and mobile devices, how can you make sure the panel height stays the same relative to the height of the viewport?
Luckily, CSS offers the solution: using vh.
If you set the height to, lets say, 60vh, the panel will always use 60% of the viewport’s currently available height, no matter on which device you are viewing your XPage. The height is updated in real-time, meaning, if you view your XPage on a tablet or mobile device and turn the screen, the height is being recalculated automatically, without you having to refresh anything.
Give it a try. Add a panel to an XPage and set the max height by using vh. Then preview it on a tablet or mobile device. If you can’t view it on a tablet or mobile device, you can also test it on your desktop. Open the XPage in a browser and then use CTRL and + to zoom in.