Do you have a Bootstrap navigation menu in XPages that collapses properly in a full browser but not on a mobile device? You may need to set a meta tag to force it to display properly. In this post, I’ll show the effects with and without the tag on a mobile device.
Navbar Collapsing
One of the great features of Bootstrap is its built-in responsive UI that scales well to work on screens of varying sizes. The navigation bars collapse nicely into the hamburger menus to make better use of available space on smaller devices.
However, in recent testing of an XPages application with a Bootstrap UI, it was noted that the navigation menus did not collapse properly when viewed on a phone. It was a little confusing because it collapsed as expected on a full browser.
When the navigation bar is set up properly, it should collapse properly on its own when the screen width is below 768 px. I verified that there are no CSS rules overruling that cutoff and that 768px is, in fact, the point where the menu collapses on the full browser.
Bootstrap Navbar Test Page
To test it out, I tried out the Bootstrap Navbar test page
On my laptop with a full browser, it showed the navigation normally.
When I shrunk the screen to be less than 768px wide, it collapsed the navigation properly.
When I checked it on my phone, it was collapsed properly.
Test Page in XPages
I copied the div that contains the navigation from that test page and pasted into an XPage in my application to see how it worked.
It collapsed as expected in a full browser but not on the phone.
It is also apparent that the page has been scaled so that it fits fully on the phone.
To verify this, I put a button on the page to tell me the screen width. As expected, it showed a width > 768 px, which is why it did not collapse the menus. It scaled the entire page to fit on the screen, so it did not fall below the threshold of the responsive design media queries.
(This is on a Samsung Galaxy. An iPhone showed it to be roughly 900px.)
And this is just a simple page. Imagine how that looks with a much bigger XPage!
The Difference
Ultimately, the main difference is that the Bootstrap test page contains a meta tag to make sure the device doesn’t shrink to fit the entire page on the screen.
<meta name="viewport" content="width=device-width, initial-scale=1">
In XPages, this can be set at the page level, but it’s easiest to do it application-wide via a theme, within a resources tag.
<resources>
<metaData>
<name>viewport</name>
<content>width=device-width, initial-scale=1.0</content>
</metaData>
</resources>
Now, when I reload the Bootstrap test page, it is displayed properly on the phone.
The button showing the screen with on the phone now shows it to be 360px wide.
