Atto Editor acting up - Menu items not alligned

Re: Atto Editor acting up - Menu items not alligned

by Franklin Lopez -
Number of replies: 3

Hello everyone, I had this problem updating the moodle version. I struggled looking for the solution and found something that can help.
 I did not find the root of the problem but a momentary solution.
 In another Moodle copy the CSS code that moodle needed with the problem and embed it in the body from the option "Add html"
 I attach CSS code just as I pasted it into the body



 "<style>
div.editor_atto_toolbar {display: block; background: # f2f2f2; min-height: 35px; border: 1px solid # 8f959e; width: 100%; padding: 0 0 9px 0} div.editor_atto_toolbar button {padding: 4px 9px; background: none; border: 0; margin: 0; border-radius: 0; cursor: pointer} div.editor_atto_toolbar button + button {border-left: 1px solid #ccc} div.editor_atto_toolbar button [disabled] {opacity: .45; background : none; cursor: default} .editor_atto_toolbar button: hover {background-image: radial-gradient (ellipse at center, # fff 60%, # dfdfdf 100%); background-color: #ebebeb} .editor_atto_toolbar button: active ,. editor_atto_toolbar button.highlight {background-image: radial-gradient (ellipse at center, # fff 40%, # dfdfdf 100%); background-color: #dfdfdf} div.editor_atto_toolbar button :: - moz-focus-inner {border: 0; padding: 0} div.editor_atto_toolbar button .icon {padding: 0; margin: 2px 0} div.editor_atto_toolbar div.atto_group {display: inline-block; border: 1px solid #ccc; border-bottom: 1px solid # b3b3b3 ; border-radius: 4px; margin: 9px 0 0 9px; background: #fff} .editor_atto _content img {resize: both; overflow: auto} .atto_hasmenu {white-space: nowrap} .atto_menuentry .icon {width: 16px; height: 16px} .atto_menuentry {clear: left} .atto_menuentry h1, .atto_menuentry h2, .atto_menuentry p {margin: 4px} .atto_form textarea.fullwidth, .atto_form input.fullwidth {width: 100%}. atto_form {padding: .5rem} .atto_control {position: absolute; right: -6px; bottom: -6px; display: none; cursor: pointer} .atto_control .icon {background-color: #fff} div.editor_atto_content: focus .atto_control, div.editor_atto_content: hover .atto_control {display: block} .editor_atto_menu.yui3-menu-hidden {display: none } .editor_atto_content img: -moz-broken {-moz-force-broken-image-icon: 1; min-width: 24px; min-height: 24px} .moodle-dialogue-base .editor_atto_menu .moodle-dialogue-content. moodle-dialogue-bd {padding: 0; z-index: 1000} .editor_atto_menu .dropdown-menu> li> a {margin: 3px 14px} .editor_atto_menu .open ul.dropdown-menu {padding-top: 5px; padding- bottom: 5px} .editor_atto_wrap {position: relative} .editor_atto_wrap textarea {direction: ltr} .editor _atto_notification .atto_info, .editor_atto_notification .atto_warning {display: inline-block; background-color: # f2f2f2; padding: .5em; padding-left: 1em; padding-right: 1em; border-bottom-left-radius: 1em; border -bottom-right-radius: 1em} .editor_atto_notification .atto_info {background-color: # f2f2f2} .editor_atto_notification .atto_warning {background-color: gold} .editor_atto_toolbar, .editor_atto_content_wrap, .editor_attoizing + textarea {-box -weeting + textarea-box border-box; box-sizing: border-box} .editor_atto_content.form-control {width: 100%; border-top: 0}
</style> "


That worked for me.


Happy coding. 

Average of ratings: Useful (2)
In reply to Franklin Lopez

Re: Atto Editor acting up - Menu items not alligned

by Manfred Steger -
First thing i want to say: Thank you all for the great community work here - Ken, you are a god and Franklin you are my hero. I tried your workaround with the additional HTML in Body. Works like a charm.

I am running in the same odd issue after upgrading from 3.8.3 to 3.8.7 with snap theme installed. I also tried to upgrade from 3.8.3 to 3.9 latest - same problem. I read about an issue in the Moodle Tracker with a problem after renaming a system folder to templates which is used by several editor plugins. After uninstalling all plugins and purges the cache, no effect, problem is still there. Maybe a hint for Gods and Heroes to go further smile
Average of ratings: -
In reply to Manfred Steger

Re: Atto Editor acting up - Menu items not alligned

by Manfred Steger -
After serveral hours of trial and error i found a solution to fix the editor issue with the comments above:

1. upgrade Moodle to the latest version of 3.9
2. disable all caches > search for cache in admin area (about 5 cache options)
3. Download the latest release of Snap Theme 3.9 from github (https://github.com/open-lms-open-source/moodle-theme_snap/releases/tag/MR-3.9)
4. Reinstall the theme in the admin area via Plugins > Upload the theme.zip
5. Purge all Caches > search for cache in admin area - last entry
6. (run the cron script - i don't know if it's necessary)
7. enable all caches

Purge all caches is mendatory due to some design issues caused by the old theme version.
Attachment after.png
Attachment before.png
Average of ratings: -
In reply to Franklin Lopez

Re: Atto Editor acting up - Menu items not alligned

by ing kong -

Equation editor button set Moodle toolbar

The buttons below allow you to undo or redo your last action. They will become active once you have added some content to your Moodle resource or activity editing pane.

Undo and redo buttons Moodle toolbar

These two buttons are the accessibility checker (the man) and the screenreader helper (the dots).

Accessibility and screen reader buttons Moodle toolbar

The accessibility checker will check for the following common accessibility issues:

Images with missing or empty alt tags (unless they have the presentation role)
Contrast of font colour and background colour meets WCAG AA guidelines
Long blocks of text are sufficiently broken up into headings
All tables require captions
Tables should not contain merged cells as they are difficult to navigate with screenreaders
All tables should contain row or column headers

Most screenreaders (e.g. NVDA or Serotek) will treat an editable region (such as a content field in a Moodle activity) like a text box. They will ignore other types of content such as images or hyperlinks contained within it. The screenreader helper allows you to provide additional information about the currently selected text (e.g. is it bold), as well as a list of any images or links within the text box.

HTML button Moodle toolbar

This is the HTML button which will allow you to edit your text in HTML format. This is quite useful for checking hidden formatting if your text does not display as expected. Sometimes Word can have a significant amount of hidden formatting which is carried into Moode if you use the copy and paste function.

This button is the Preview button which allows you to view your changes before saving them.

Preview button on Moodle toolbar

The hashtag button (on the left) is the Word Count button which can be useful if you have set your students tasks (such as participating in discussion fora) with word limits. The green E is the Planet eStream button and this enables you to insert Planet eStream items (usually videos) into your content box. Warwick currently subscribes to eStream and some staff store and share videos directly into Moodle via the Planet eStream plugin.

Toggle button Moodle toolbar

The double headed cross is the Toggle full screen mode button which will expand the editing pane to full screen removing the Moodle menus and headings from the screen to give you more space. It is quite useful if you are working in HTML mode as it makes the code clearer.

Font buttons on Moodle toolbar

The paintbrush icon is the Font colour button with a drop down menu that lets you change the colour of your text. This has a fairly limited palate so you may want to consider using HTML code if you want to use more unusual text colours.

The button with the T on it is the Font size button and this lets you change the size of your font within a limited menu of options. Again if you want to use a wider range of sizes you might want to consider using HTML code instead.

The button with Ff on it is the Font button. There is a limited range of fonts used within Moodle and these are available as part of this drop down menu.

The last button is the template button; please ignore this as we do not use templates at Warwick.
you can read here https://warwick.ac.uk/fac/soc/cte/students-partners/academictechnology/academictechnologies/moodle/texteditor or https://maga888.com and https://warwick.ac.uk/fac/soc/cte/students-partners/academictechnology/academictechnologies/moodle/

Average of ratings: -