Moodle

Course view misaligned

Details

  • Type: Bug Bug
  • Status: Open Open
  • Priority: Major Major
  • Resolution: Unresolved
  • Affects Version/s: 2.0
  • Fix Version/s: None
  • Component/s: Themes
  • Labels:
    None
  • Affected Branches:
    MOODLE_20_STABLE

Description

Tried in Custom Corners, Standard and Formal White. Course view is all over the place, see attached screendump for example. Tested on both Firefox and Safari on a Mac.

Issue Links

This issue will be resolved by:
MDL-9306 Main course formats need to have tables removed but keep AJAX working Blocker Closed

Activity

Ascending order - Click to sort in descending order
Hide
Permalink
Tim Hunt added a comment -

I think this was caused by work on MDL-9306.

Show
Tim Hunt added a comment - I think this was caused by work on MDL-9306.
Hide
Permalink
Gareth Barnard added a comment -

Hi,

In trying to solve a simar issue with my course format 'topcoll' for Moodle 2 - as I have had to reapply my changes to the topic format's format.php and use, so I found a website:

http://css.maxdesign.com.au/floatutorial/tutorial0916.htm

After a bit of testing, realising that the web browser needed something more to push everything to the right to fill width for the <li> container, so I added:

echo '<div style="clear: both; margin: 0;height: 0px;"></div>';

just after the <li> and just before the </li> in format.php, around lines 178 and 245 respectively in version 1.102

e.g:

echo '<li id="section-'.$section.'" class="section main'.$sectionstyle.'" >'; //'<div class="left side"> </div>';

echo '<div style="clear: both; margin: 0;height: 0px;"></div>';
echo '<div class="left side">'.$currenttext.$section.'</div>';
// Note, 'right side' is BEFORE content.

and

if ($PAGE->user_is_editing()) { print_section_add_menus($course, $section, $modnames); }
}

echo '</div>';
echo '<div style="clear: both; margin: 0;height: 0px;"></div>';
echo "</li>\n";

respectivly.

I have tested on Firefox 3.5.2 and IE 8 - on which compatibility mode shows more space, but could it be a possible part solution which could then be fully put in css to make the code shorter?

Cheers,

Gareth

Show
Gareth Barnard added a comment - Hi, In trying to solve a simar issue with my course format 'topcoll' for Moodle 2 - as I have had to reapply my changes to the topic format's format.php and use, so I found a website: http://css.maxdesign.com.au/floatutorial/tutorial0916.htm After a bit of testing, realising that the web browser needed something more to push everything to the right to fill width for the <li> container, so I added: echo '<div style="clear: both; margin: 0;height: 0px;"></div>'; just after the <li> and just before the </li> in format.php, around lines 178 and 245 respectively in version 1.102 e.g: echo '<li id="section-'.$section.'" class="section main'.$sectionstyle.'" >'; //'<div class="left side"> </div>'; echo '<div style="clear: both; margin: 0;height: 0px;"></div>'; echo '<div class="left side">'.$currenttext.$section.'</div>'; // Note, 'right side' is BEFORE content. and if ($PAGE->user_is_editing()) { print_section_add_menus($course, $section, $modnames); } } echo '</div>'; echo '<div style="clear: both; margin: 0;height: 0px;"></div>'; echo "</li>\n"; respectivly. I have tested on Firefox 3.5.2 and IE 8 - on which compatibility mode shows more space, but could it be a possible part solution which could then be fully put in css to make the code shorter? Cheers, Gareth
Hide
Permalink
Gareth Barnard added a comment -

Hi,

Working on the similar issue with my format, I have been able to sort things out from the information found on:

http://css-tricks.com/all-about-floats/
&
http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack/

Where I then implement the following css:

li.section:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

li.section {
display: inline-block;
padding: 0 0;
width: 100%;
}
/* start commented backslash hack */

  • html li.section { height: 1%; }
    li.section {
    display: block;
    width: 100%;
    }
    /* close commented backslash hack */

Which gets a near perfect solution.

I hope this helps,

Cheers,

Gareth

Show
Gareth Barnard added a comment - Hi, Working on the similar issue with my format, I have been able to sort things out from the information found on: http://css-tricks.com/all-about-floats/ & http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack/ Where I then implement the following css: li.section:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } li.section { display: inline-block; padding: 0 0; width: 100%; } /* start commented backslash hack */
  • html li.section { height: 1%; } li.section { display: block; width: 100%; } /* close commented backslash hack */
Which gets a near perfect solution. I hope this helps, Cheers, Gareth

People

Vote (0)
Watch (1)

Dates

  • Created:
    Updated:
Atlassian JIRA (v4.4.3#663-r165197) | Report a problem
Powered by a free Atlassian JIRA open source license for Moodle. Try JIRA - bug tracking software for your team.