Firefox Styling Gotcha With ComponentArt TreeView

Niklaus Wirth's Ghost — Fri, 16 Apr 2010 17:55:28 +0000

This was a fun one that I ran into today. I don’t think it’s specific to ComponentArt but that’s where I ran into it. We have a web form that has a couple of tables on it, used for switching back and forth between viewable controls. One of the tables contains a ComponentArt TreeView. Based on user interaction, we would use JavaScript to change the applicable table’s styles to block or none, depending on whether we wanted it shown or not. This worked great in all browsers but Firefox. Firefox seemed to ignore all sizing on the table and instead would fit the table to the TreeView based on the contents. We wanted the tables to stay 100% sized so having weird rendering problems in Firefox wasn’t acceptable.

Turns out, Firefox doesn’t like having tables’ styles set to “block” as a way to make them visible, ala the 10th post in this thread. So instead of doing this:

    function showCourseList()
		{
			document.getElementById('tblList').style.display = 'block';
			document.getElementById('tblTree').style.display = 'none';
			fixMoz();
		}

I did this instead:

    function showCourseList()
		{
			document.getElementById('tblList').style.display = '';
			document.getElementById('tblTree').style.display = 'none';
			fixMoz();
		}

This works not only in Firefox but all other major tested browsers which in my case is IE and Safari.

Mental Pandiculation » Safari

Firefox Styling Gotcha With ComponentArt TreeView