Tuesday, May 19, 2009

Rendering ComponentArt's Splitter in Firefox

I've been working a little bit to add support for FireFox in my application which has only supported IE6 and better. I am trying to be proactive knowing one day my boss will ask for this, and it is actually helping to cleanup the markup we have quite a bit.

Along this journey, I noticed that we have a splitter bar, which has a tree view in one pane and a tree view in a second pane. It is a two pane vertical split. In IE6,7 and 8 (even in standards mode), the pane rendered correctly. When viewed in Firefox the first pane was shown; however, the second pane wasn't being rendered. It looked like the splitter container width was being set to the width of the first pane, which caused that pane to take up the entire container.

After working with Component Art's support team, it was noticed that when you resize the window, the pane would then render correctly. With their help, we found the following to force the splitters to render correctly in firefox.

function splitter_load() {

    if (jQuery.browser.mozilla) {

        splitter.element.style.width = 

              $("#divBidSummary").width() + "px";




myContainer is a div which I have set to a width of 99% of it's parent. This allows the splitter to grow and shrink as the page is resized. This sample uses jquery, which is an excellant javascript library.

Note: Thanks goes out to Hwan to helping to track down and develop a work around for this solution.

1 comment:

stainless steel barometer said...
This comment has been removed by a blog administrator.