Using the responsive design feature in unsupported browsers

If you wish to use the responsive design feature and support Internet Explorer 8, you will need to add some extra resources to your server.

Internet Explorer 8 and earlier versions of Internet Explorer do not support CSS3 Media Query. Also, jQuery 2.x does not support IE8. As a result, IE8 and earlier are not supported in the current version of the XPages Responsive Bootstrap plugin.

If you wish to use XRB and support IE8, you will need to add some extra resources to your server. The first resource is jQuery 1.x, as the older version of jQuery supports IE8.

Use these steps to do this:

  • Download jQuery 1.x from the jQuery web site.
  • Put the jquery.1.x.min.js file in a sub-directory of the html folder on the server. For example, this might be <domino-server>/Data/domino/html/jquery/jquery.1.x.min.js.
  • Add the resource to your XPage with this code:
    <xp:this.resources>
	<xp:script src="/.ibmxspres/domino/jquery/jquery.1.x.min.js" clientSide="true">
	</xp:script>
</xp:this.resources>
You can also add the resource to a theme that extends the Bootstrap3 theme and then set your application to use the extended theme as follows:
<theme extends="Bootstrap3"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd" >
	<resource rendered="#{javascript:context.getUserAgent().isIE(7,8)}">
		<content-type>application/x-javascript</content-type>
		<href>/.ibmxspres/domino/jquery/jquery.1.x.min.js</href>
	</resource>
</theme>

A conditional check has been included in the theme example above, so that the extra jQuery resource is only loaded for IE7 & IE8.

The second resource that needs to be added to your server for IE8 support in XRB is Respond.js. Respond.js is an open source project on GitHub that aims to solve the problem of CSS3 media query support in older IE versions. This project is referenced on the getbootstrap website as a means to resolve the problem. You can add the Respond.js resource to your server in the same way as jquery above. The steps are the following:

  • Download the respond.min.js resource from the GitHub repository.
  • Put the respond.min.js file in a sub-directory of the html folder on the server. For example, this might be <domino-server>/Data/domino/html/jquery/respond.min.js.
  • Add the resource to your XPages as follows:
    <xp:this.resources>
	   <xp:script src="/.ibmxspres/domino/respond/respond.min.js" clientSide="true">
	   </xp:script>
	</xp:this.resources>

You can also add the resource to a theme that extends the Bootstrap3 theme and then set your application to use the extended theme as follows:

<theme extends="Bootstrap3" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd" >
	<resource rendered="#{javascript:context.getUserAgent().isIE(7,8)}">
		<content-type>application/x-javascript</content-type>
		<href>/.ibmxspres/domino/respond/respond.min.js</href>
	</resource>
</theme>

As IE8 is not supported by the responsive design feature, there may be further issues that arise that are not covered by this documentation.