Text editors

Right align not behaving as desired

 
 
Picture of Julia Dando
Right align not behaving as desired
 

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: -
Picture of Julia Dando
Re: Right align not behaving as desired
 

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

PIC1

1.9

PIC 2:

2.0

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Right align not behaving as desired
Group Particularly helpful Moodlers

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.

 
Average of ratings: -
Picture of Julia Dando
Re: Right align not behaving as desired
 

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

 
Average of ratings: -
Picture of Itamar Tzadok
Re: Right align not behaving as desired
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

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

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Right align not behaving as desired
Group Particularly helpful Moodlers

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.

 
Average of ratings: -
Picture of Julia Dando
Re: Right align not behaving as desired
 

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

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Right align not behaving as desired
Group Particularly helpful Moodlers

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)
Picture of Julia Dando
Re: Right align not behaving as desired
 

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.

 
Average of ratings: -
Jon
Re: Right align not behaving as desired
Group Particularly helpful Moodlers

Any ideas for how to accomplish this with Moodle 2.3?

 
Average of ratings: -
Jon
Re: Right align not behaving as desired
Group Particularly helpful Moodlers

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?

 
Average of ratings: -
Jon
Re: Right align not behaving as desired
Group Particularly helpful Moodlers

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.

 
Average of ratings: -
Jon
Re: Right align not behaving as desired
Group Particularly helpful Moodlers

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

 
Average of ratings: -
Jon
Re: Right align not behaving as desired
Group Particularly helpful Moodlers

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?

 
Average of ratings: -
Picture of Julia Dando
Re: Right align not behaving as desired
 

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

 
Average of ratings: -
Picture of Bex Ferriday
Re: Right align not behaving as desired
 

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

 
Average of ratings: -
Picture of Julia Dando
Re: Right align not behaving as desired
 

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

 
Average of ratings: -
Picture of Dietmar Wagner
Re: Right align not behaving as desired
Group Particularly helpful Moodlers

Hallo Julia,

perhaps it is not the best idea. But you might put something like the following in the css-files of your theme:

 

/** activities & images
------------------- **/

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

.course-content .section li.activity.label .no-overflow {
overflow: visible;
}

Regards,
Dietmar

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Right align not behaving as desired
Group Particularly helpful Moodlers

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)
Picture of Dietmar Wagner
Re: Right align not behaving as desired
Group Particularly helpful Moodlers

You're - as always smile - right, Mauno. Youre code works fine.

Dietmar

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Right align not behaving as desired
Group Particularly helpful Moodlers

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

 
Average of ratings: -
Picture of Amy Groshek
Re: Right align not behaving as desired
Group DevelopersGroup Testers
We are using .path-course-view .content .summary .no-overflow { display:inline; }
 
Average of ratings: -
Picture of Melissa Benson
Re: Right align not behaving as desired
Group Particularly helpful MoodlersGroup Testers

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?



 
Average of ratings: -