Rewrite widget canvas to not use tables

[coldtrick]

In IE7 if you have a long (lots of widgets) right column on your profile, the profile box table cell gets larger (which means a lot of white space).

In the css this is fixed for FF (and other browser) by providing a height=1px on this cell.

Unfortunately IE7 isn't listening to height=1px in strict mode. You can try this yourself on elgg.org.

I solved this by recoding the widgets layout to using div's instead of a table. Maybe in future version you could use div's instead of tables for the widget layout.

[dave]

The problem with using divs to layout the widget canvas instead of a table is it doesn't render correctly in IE6 (or at least we can't get things to render correctly in IE6). We would like to move to a div based layout but as long as Elgg needs to support IE6, we are stuck.

However, if someone comes up with a div based layout that does work well in IE6, we would certainly consider rolling with it.

[pete]

Yeah, if I remember correctly the issue was with IE not adhering to table cells vertical-align:top; when the cell height is set to 100%.

To re-iterate what Dave said - if someone has the time and inkling to make a widget layout that works in IE6 as well as all the other browsers - we would definitely take a look and roll with it if it's robust.

[coldtrick]

Ok guys, here it comes:

in canvas/layouts/widgets.php replace everything after line 254 (where the widgettable starts) with:

<div id="widget_table">
	<div id="widgets_layout_left">
		<?php if (isset($vars['area1'])) echo $vars['area1']; ?>
		
		<!-- left widgets -->
		<div id="widgets_left">
		
		<?php
		
			if (is_array($area1widgets) && sizeof($area1widgets) > 0)
			foreach($area1widgets as $widget) {
				echo elgg_view_entity($widget);
			}
	
		?>
		
		</div><!-- /#widgets_left -->
		
		<!-- widgets middle -->
		<div id="widgets_middle">
		
		<?php if (isset($vars['area2'])) echo $vars['area2']; ?>
		<?php
		
			if (is_array($area2widgets) && sizeof($area2widgets) > 0)
			foreach($area2widgets as $widget) {
				echo elgg_view_entity($widget);
			}
		
		?>
		
		</div><!-- /#widgets_middle -->
		
	</div>
	<div id="widgets_layout_right">
		<?php 
		
		if($_SESSION['user']->guid == page_owner()){
		?>
		<!-- customise page button -->
		<a href="javascript:void(0);" class="toggle_customise_edit_panel"><?php echo(elgg_echo('dashboard:configure')); ?></a>
		<!-- <div style="clear:both;"></div> -->
		<?php
		}
		?>
	
		<div id="widgets_right">
		<?php
		
			if (is_array($area3widgets) && sizeof($area3widgets) > 0)
			foreach($area3widgets as $widget) {
				echo elgg_view_entity($widget);
			}
	
		?>
		
		</div><!-- /#widgets_right -->
	</div>
</div>	

Then in the css add:

#widgets_layout_left{
	width: 628px;
	float:left;
}

#widgets_layout_right {
	width: 323px;
	float:right;
}

and in the css add to #widgets_left
float: left;

and to #widgets_right
float: right;

This should do the trick!

I personnaly confirmed it on a WindowsXP ie6 machine.

I did not provide the changes to the css that are now obsolete, but i guess you can figure that one out.

[dave]

Thanks for the patch. We are aiming to make v1.8 an interface release which will tackle many of the layout/navigation/non-standardized issues in Elgg. We will certainly look at your submission as part of that process.

[cash]

(In [svn:7329]) Refs #821 #1793 early widget layout - does not include edit settings, delete, collapsing, reloading, or adding widgets

[cash]

(In [svn:7333]) Refs #1793 - added a basic add new widgets view - it is not wired up yet

[cash]

(In [svn:7338]) Refs #1793 added ability to add widgets to layout through ajax

[cash]

(In [svn:7339]) Refs #1793 getting sorted widgets from elgg_get_widgets()

[cash]

I'm closing this one. We can open new tickets as we find problems with the new widget layout.