[Solved] TinyMCE issue in Essential for M2.8 help wanted.

[Solved] TinyMCE issue in Essential for M2.8 help wanted.

by Gareth J Barnard -
Number of replies: 10
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Themers,

I am a tad perplexed as to why the calculated top value of the dropdown menu's of the TinyMCE editor in Essential is different to Clean when the CSS is the same and so should the surrounding mark-up.

I have pinned down the JS line to 'top : p2.y + e.firstChild.clientHeight' of 'tiny_mce_src.js' as you can see in the issue: https://github.com/gjb2048/moodle-theme_essential/issues/310.

To replicate, just make sure that the TinyMCE editor is used in the list of available text editors and you are using Essential from: https://github.com/gjb2048/moodle-theme_essential/tree/master on a M2.8.1 test server.

If anybody can cast their eyes over this and spot what I have not been able to see so far then that would be appreciated.

Thanks,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: TinyMCE issue in Essential for M2.8 help wanted.

by Mauno Korpelainen -

Maybe the reason is in bootstrapbase-theme css that is the parent theme of Clean but not a parent theme of Essential. 

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

Re: TinyMCE issue in Essential for M2.8 help wanted.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks, I did compare 'bootstapbase' and 'Essential' css for tinyMCE classes and the two are identical.

In reply to Gareth J Barnard

Re: TinyMCE issue in Essential for M2.8 help wanted.

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I'm not 100% sure why you have excluded BootstrapBase theme, whereas making it a parent would lessen the amount of css you have in Essential surely? You would only need to tweak it here and there.

In reply to Mary Evans

Re: TinyMCE issue in Essential for M2.8 help wanted.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Excluding the Bootstrapbase theme initially gave us more power and control over changes, thus stability despite the maintenance hit.

Now with the advent of issue #249 to support both LTR and RTL flexibly on the same site at the same time.  This results in a substantial reduction in the amount of served CSS and the browser for the most part only gets the CSS it needs.  This is a performance boost for mobile devices.  In addition the CSS is gzipped when transmitted over the network.  Therefore Essential needs to have an altered version of the LESS with almost all dir-rtl styles stripped out.

Both 2.7.9,3 and 2.8.0.1 of the theme are identical and yet only a M2.8.1 problem.  Therefore something to do with the upgrade of TinyMCE or the nature of a parent tag style for which the JS uses in its calculation.  Hence the question and request for help.

In reply to Gareth J Barnard

Re: TinyMCE issue in Essential for M2.8 help wanted.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

So ultimately in both Clean and Essential I want to know what 'p2' and 'e.firstChild' point to in the document object model to understand the nature of the 'why'.  Also need to see if the src version is used when TDM on.

In reply to Gareth J Barnard

[SEE FIX HERE] Re: TinyMCE issue in Essential for M2.8 help wanted.

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Try removing position: relative from the body tag in Essential CSS.

Appears to fix the problem.

It's unusual to see position-relative in the body. If it is meant as a CSS reset. then this needs to come first before everything, so should be right at the top of the first spreadsheet called not buried in the the middle. I found this at line 16453 of essential.css

/* @group Core */
body {
  line-height: 20px;
  text-shadow: none;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  background-color: rgba(255, 255, 255, 0.6);
  background-size: cover;
  margin: 0px;
  padding: 0px;
}

In reply to Mary Evans

Re: [SEE FIX HERE] Re: TinyMCE issue in Essential for M2.8 help wanted.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Thank you so much Mary, I will have a look.  I have no idea why that is there.

In reply to Gareth J Barnard

Re: [SEE FIX HERE] Re: TinyMCE issue in Essential for M2.8 help wanted.

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Well looking at it, it does look like it should be at the start of the page at least, as it is reset css, which in effect resets some CSS to their baseline and sets the scene for other styles that follow. I am not saying it should not be there, as it can be added.  It does look like one of Julian's original styles, especially for Base theme layouts where we added position: relative; as an IE hack to counteract the overflow: hidden bug Fig.1 in all the layout IDs like #page-content, #region-main-box, #region-main-wrap, #region-main.

Fig.1.
position:relative; /* This fixes the IE7 overflow hidden bug */

Quote: http://matthewjamestaylor.com/blog/perfect-3-column.htm (see page source)

Hope this helps?

Cheers

Mary

In reply to Gareth J Barnard

Re: TinyMCE issue in Essential for M2.8 help wanted.

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

OK...

Just testing it now on latest updates to MOODLE_28_STABLE on my localhost/moodle28