XPages, CSS and Profile Application

HCL Domino Domino Forum
1

This is a long one so let me get right to the question:

How do you you send specific CSS to different browsers in XPages? I’ve seen references to this in the oneUI stuff, but I haven’t figured it out yet.

I’m working with XPages and the Profile application that was demo’s at SHOW106 in Lotusphere and posted to the wiki here:

http://www-10.lotus.com/ldd/ddwiki.nsf/dx/LS09_SHOW106.htm

What I’m really trying to do is better figure out repeat controls and how to use them. I really like what was done with the “My Friends” section of the Profiles application. Specifically the listing of friends that are displayed in a box from left to right:

This looks great… in Firefox. But in IE7 they don’t go from left to right. They go vertical:

(We’ve also lost the rounded corners, but I’m not too worried about that right now.)

Now I’m not a CSS expert by any stretch of the imagination. But it looks to me like IE7 doesn’t support “display: inline-block”

The actual CSS is here to control these boxes is this:

.friendsPanel{

display:inline-block;

padding:4px;

margin:4px;

background-color:#f0f4f9;

border:1px solid #c0c0c0;

-moz-border-radius:4px;

  -webkit-border-radius:4px;}

In searching the internet I found some workarounds for this, but I’m not sure how to apply a workaround for a specific browser in XPages.

I found one possible solution on webdeveloper.com:

but I don’t know how to implement this. I’m not sure how to add HTML directly to an XPage and I thought there is a nicer way to handle this kind of browser difference…

I know this was a long one, but I wanted to make sure I got the point across. Thanks for reading and for any advice!

2

Subject: Use a theme

in a theme you can specify specific stylesheets for specific configurations / browsers etc.

assuming you have a them like this one:

<!-- Global resources used by this theme -->

<resource>

	<content-type>text/css</content-type>

	<href>yourStandard.css</href>

</resource>



<resource>

	<content-type>application/x-javascript</content-type>

	<href>yourStandardJSLib.js</href>

</resource>





<!-- conditionally load css files based on browser type -->



<resource rendered="#{javascript:context.getUserAgent().isIE()}">

	<content-type>text/css</content-type>

	<href>msie.css</href>

</resource>



<resource rendered="#{javascript:context.getUserAgent().isFirefox()}"

	<content-type>text/css</content-type>

	<href>firefox.css</href>

</resource>



<!-- Property values -->

<control>

....

</control>

as you can see you can pass some javascript code to the “rendered” attribute of your theme’s resource tags. In your case you want to know which browser is being used, so you’ll query properties of the XSPUserAgent object. See the object’s reference to learn about the available parameters.

If the js code returns TRUE the additional resource is loaded, otherwise it’s not. And this not only works for .css files but also for additional js libs!

Hope this helps you solving your task.

Good luck!

3

Subject: Thanks!

I’ll check that out. I haven’t quite grasped the concept of Themes yet. I wasn’t sure what they were for. But your code sample helps point me in a direction. I really appreciate that!!!

Thanks again!