Right align not behaving as desired

Right align not behaving as desired

by Julia Dando -
Number of replies: 22

I am not sure whether this is a TinyMCE issue or a moodle issue but it can sit here for now.

In 1.9 it was possible to have pictures sit neatly on the right of activities and resources in your moodle course sections by simply right aligning them...see pic below:

 

However, in moodle 2.0 I can not recreate this behaviour... see pic below:

Does anyone have any suggestions on this... it's rather annoying, as right aligning pictures was a nice way of making a neat and aesthetically pleasing course area.

Perhaps a work around....some different html tags...or perhaps installing a different html editor?  Perhaps it isn't the html editor's issue... your thoughts are appreciated...

smile

Average of ratings: -
In reply to Julia Dando

Re: Right align not behaving as desired

by Julia Dando -

hmm...not sure the pictures are showing for everyone so i try post them again..

PIC1

1.9

PIC 2:

2.0

In reply to Julia Dando

Re: Right align not behaving as desired

by Mauno Korpelainen -

I might say that it is a html issue.

In moodle 1.9 resources were listed with <ul><li>...</li>...<li>...</li></ul> inside the same table <td> tags as those right aligned images in topics and therefore right alignment had effect.

In moodle 2 resources are within separate <div> tags and furthermore tinymce adds <p> tags around content of the topic that you edit so only the content of your topic is aligned according to your image right alignment. In this case it does not help even if you disable editor and remove those <p> tags because the outer <div> tags are rendered by core code of moodle.

In reply to Mauno Korpelainen

Re: Right align not behaving as desired

by Julia Dando -

hmmm...it's a shame if it cant be fixed...or at least worked around mixed

this, together with non-resizeable youtube embeds is making moodle 2.0 rather a dull boy for me at the moment.... sad

In reply to Julia Dando

Re: Right align not behaving as desired

by Itamar Tzadok -

You may be able to work around this if instead 'align: right' you use 'position:absolute;right:0;'.

In the image form switch to the Appearance tab. There you will see a property 'style' which should have the value

align:right;

Replace this value with

position:absolute;right:0;

hth smile

In reply to Itamar Tzadok

Re: Right align not behaving as desired

by Mauno Korpelainen -

It's not yet a perfect solution because absolute position causes overlapping

overlap

 

It looks like the main problem is in course formats that were changed in moodle 2 to prevent overlapping for other issues. It might be possible to create some new course format or for example edit current files like course/format/topics/format.php or course/format/weeks/format.php and comment there lines with

$summaryformatoptions->overflowdiv = true;

with

// $summaryformatoptions->overflowdiv = true;

In that case style="float: right;" that TinyMCE gives to images with image plugin (Appearance tab - Alignment) works like expected and text and the following resources get wrapped to the left of images, not overflown.

In reply to Mauno Korpelainen

Re: Right align not behaving as desired

by Julia Dando -

It looks like the main problem is in course formats that were changed in moodle 2 to prevent overlapping for other issues. It might be possible to create some new course format or for example edit current files like course/format/topics/format.php or course/format/weeks/format.php and comment there lines with

$summaryformatoptions->overflowdiv = true;

with

// $summaryformatoptions->overflowdiv = true;

In that case style="float: right;" that TinyMCE gives to images with image plugin (Appearance tab - Alignment) works like expected and text and the following resources get wrapped to the left of images, not overflown.

 

tried this but doesn't seem to make any difference unless I missed something...

 

Thanks for trying though smile

In reply to Julia Dando

Re: Right align not behaving as desired

by Mauno Korpelainen -

Some possible reasons why it works fine for my test site but not on your test site:

1) Both file course/format/weeks/format.php and file course/format/topics/format.php have two lines with that content (somewhere near line 105 or 111 and somewhere near line 234 or 237) - comment both of them... or you could also change those lines to

$summaryformatoptions->overflowdiv = false;

2) Check from your course settings which format your course is using.

3) When you add new images check that image plugin sets alignment to the right

Right

Once clicked you should see the css that plugin produces - float:right

Attached an example from my test site - no absolute positioning, just two commented lines in format.php files and it worked both in weekly format and topic format.

Right2

4) If changes to php files do not seem to take effect the reason might be in server cache - you may have for example eaccelerator enabled in php.ini - if yes, try to set eaccelerator.enable = "0" to php.ini

Average of ratings: Useful (2)
In reply to Mauno Korpelainen

Re: Right align not behaving as desired

by Julia Dando -

This is why I love the OS community.....thank you...it works perfectly.

*passes big plate of cookies to Mauno*

Thank to everyone for your help on this.

In reply to Mauno Korpelainen

Re: Right align not behaving as desired

by Jon Fila -

Any ideas for how to accomplish this with Moodle 2.3?

In reply to Jon Fila

Re: Right align not behaving as desired

by Jon Fila -

Ok, it's possible that I've done this incorrectly so hopefully if that is the case someone can correct me.

I edited the moodle/course/format/topics/styles.css file and changed this:

.course-content ul.topics li.section .content {margin:0 40px;}

to this:

.course-content ul.topics li.section .content .no-overflow {margin:0 40px; overflow: visible;}

Does that look okay?

In reply to Jon Fila

Re: Right align not behaving as desired

by Jon Fila -

I'm back. Now I'm having trouble accomplishing this in Moodle 2.5 with the Clean theme. The old tricks still work with the other themes, but if Moodle is moving all themes to be based off of this one, I want to make sure that I have a fix for this as well.

Any ideas? I'll report back if I find anything on my own.

In reply to Jon Fila

Re: Right align not behaving as desired

by Jon Fila -

Looks like I'll just stick with:
position:absolute;right:0;
for images in lables for now.

In reply to Jon Fila

Re: Right align not behaving as desired

by Jon Fila -

I'm still having trouble accomplishing this in the Clean theme using any custom CSS. Any ideas about what might be required to make images on the main course page align to the right of the list of course resources and activities?

In reply to Itamar Tzadok

Re: Right align not behaving as desired

by Julia Dando -

Thanks...nice try but yes...get overlapping as in pic below... we're getting close though ...I can feel it wink

In reply to Julia Dando

Re: Right align not behaving as desired

by Bex Ferriday -

...all moodle and no poodle makes Julia a dull girl...wink

In reply to Bex Ferriday

Re: Right align not behaving as desired

by Julia Dando -

aaaah...but in my line of work we get plenty of poodle in our moodle tongueout

In reply to Julia Dando

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Deleted user

Re: Right align not behaving as desired

by Mauno Korpelainen -

Dietmar,

it's a perfectly good idea - and if you use custom themes you don't need to edit core code. On the other hand if site has several themes all of them need the same css added to theme css files.

I tested plain

.course-content ul.topics li.section .content .no-overflow,
.course-content ul.weeks li.section .content .no-overflow {
overflow: visible;
}

and it did the same job as editing course formats.

Average of ratings: Useful (1)
In reply to Mauno Korpelainen

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Deleted user

Re: Right align not behaving as desired

by Mauno Korpelainen -

It might be really interesting to test different variations of theme css AND course formats to support different course layouts. In a way course formats are like templates and it is also possible to create themes that reserve some "blocks" to some absolute or relative position. Itamar's suggestion failed only because core code (or theme css) uses left, right and content divs inside the same "box".

I just read one nice article http://css-tricks.com/all-about-floats/ and at the bottom of this article there are some links to some alternative solutions which are even more interesting. smile

In reply to Mauno Korpelainen

Re: Right align not behaving as desired

by Amy Groshek -
We are using .path-course-view .content .summary .no-overflow { display:inline; }
In reply to Mauno Korpelainen

Re: Right align not behaving as desired

by Melissa Benson -

I tried adding .course-content ul.topics li.section .content .no-overflow {margin:0 40px; overflow: visible;}

To the moodle/course/format/topics/styles.css and now the Binarius and Boxxie (and probably others) theme is a bit messed up. The vertical side colored bars are now gone and one long horizontal bar is going across. See attached screenshot.

 

Any help?

Attachment Screen Shot 2013-08-06 at 9.38.46 AM.jpg
Attachment Screen Shot 2013-08-06 at 9.40.35 AM.jpg