XPages and Me

My Journey into XPages Development

Dabbling in Bootstrap and Font Awesome Part 3: Living on the (IE) edge

As I mentioned in Part 2, to make IE8 / IE9 play nicely with Bootstrap / Font Awesome, you need to add additional JavaScript files. But that is not all. You’ll also need to make sure that IE8 / IE9 is not running in compatibility mode.

So, yours truly did what any good developer would do, who has to work with IE8 / IE9, and added a meta tag to my theme that would command IE to always run as its latest version with IE=edge, which looked something like this:

<resources>
  <metaData>
    <httpEquiv>X-UA-Compatible</httpEquiv>
    <content>IE=edge</content>
  </metaData>
</resources>

However, IE wouldn’t listen even though I commanded it to do as I command. I also tried to put the following code into the “beforeRenderResponse” event of my XPage, but no cool Font Awsome icons and the fields on my form didn’t look right either:

if (context.getUserAgent().isIE()) {
    var response = facesContext.getExternalContext().getResponse();
    response.setHeader('X-UA-Compatible', 'IE=edge');
}

It was starting to drive me nuts, to put it politely and I was just about to give up on Font Awesome, until I noticed this while using IE8’s Developer Tools:

Image 1

Yes, the browser mode was running in IE8 but the Document Mode was still running IE7, no wonder it wouldn’t work. After doing some more research, I found out that the X-UA-Compatible meta tag must appear straight after the title in the element. No other meta tags, css links and js scripts calls can be placed before it.

So, what finally solved the issue was adding the following to my application theme (which extends my bootstrap theme from Part 2):

<theme extends='bootstrap' xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xsi:noNamespaceSchemaLocation='platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd' >

		<control override='false'>
			<name>ViewRoot</name>

	<!-- DB Title -->
				<property>
					<name>pageTitle</name>
					<value>#{javascript:@DbTitle()}</value>
				</property>

	<!-- Make sure to set Browser Mode and Document Mode to the highest possible for IE -->
				<property>
					<name>styleClass</name>
					<value>#{javascript: var response = facesContext.getExternalContext().getResponse();
						response.setHeader('X-UA-Compatible', 'IE=edge');}</value>
				</property>
		</control>

</theme>

Finally, Font Awesome icons and Bootstrap were working. I was a happy camper.

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: