XPages and Me

My Journey into XPages Development

Diving into Bootstrap and Font Awesome – Part 6: Fun with Panels 1

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: