Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

profile: Rewrite widget canvas to not use tables (Trac #1793) #1793

Closed
elgg-gitbot opened this issue Feb 16, 2013 · 11 comments
Closed

profile: Rewrite widget canvas to not use tables (Trac #1793) #1793

elgg-gitbot opened this issue Feb 16, 2013 · 11 comments

Comments

@elgg-gitbot
Copy link

Original ticket http://trac.elgg.org/ticket/1793 on 39705620-05-27 by trac user coldtrick, assigned to cash.

Elgg version: 1.7

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.

@elgg-gitbot
Copy link
Author

davetosh wrote on 39708311-12-26

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.

@elgg-gitbot
Copy link
Author

trac user pete wrote on 39710921-12-06

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.

@elgg-gitbot
Copy link
Author

trac user coldtrick wrote on 39713544-03-27

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.

@elgg-gitbot
Copy link
Author

davetosh wrote on 40103284-05-18

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.

@elgg-gitbot
Copy link
Author

Milestone changed to Elgg 1.8 by davetosh on 40103284-05-18

@elgg-gitbot
Copy link
Author

Title changed from Widget columns showing incorrectly in IE7 to Rewrite widget canvas to not use tables by brettp on 40766543-04-09

@elgg-gitbot
Copy link
Author

cash wrote on 40879327-01-27

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

@elgg-gitbot
Copy link
Author

cash wrote on 40881448-09-11

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

@elgg-gitbot
Copy link
Author

cash wrote on 40883510-08-27

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

@elgg-gitbot
Copy link
Author

cash wrote on 40883587-08-04

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

@elgg-gitbot
Copy link
Author

cash wrote on 40889096-12-06

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

1 participant