RockPageBuilder: strange WYSIWYG editor behavior

[herr rilke]

hey,

im trying to set up a page using RockPageBuilder 5.4.4 on ProcessWire 3.0.239 

in textedit fields i get a not so good places iconbar for editing text, that doesn't blend out, when not needing it:

 

 

in firefox i get in a select the following problem:

 

any hints for that?

 

[Stefanowitsch]

15 hours ago, herr rilke said:

in firefox i get in a select the following problem:

 

any hints for that?

 

Hi @herr rilke

This looks like some CSS styles are interfering with the Editor Toolbar Styles.

I would advice you to investigate the markup this dropdown with the developer tools in the frontend and see what CSS rules are applied and from where they come from (maybe some other stylesheets, maybe the frontend framework that you included in the project, etc.)

 

 

[bernhard]

Hey @herr rilke any chance your browser is scaled to more than 100% ?

 

[herr rilke]

hello and thank you both for your ideas,

the easiest first: browsers are not scaled.

what i can see in the devtools is that for the h1 tag in the editor

<div class="tox-collection__item-label">
  <h1 style="font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; font-size: 32px; font-weight: bold; font-style: normal; text-decoration: none solid rgb(34, 34, 34); text-transform: none; color: rgb(34, 34, 34); background-color: rgba(0, 0, 0, 0); padding: 0px 2px; border: 0px none rgb(34, 34, 34); border-radius: 0px; outline: rgb(34, 34, 34) none 0px; text-shadow: none;">
    Überschrift 1
  </h1>
</div>

this css makes a difference:

skin.min.css:1

@media only screen and (min-width: 768px) {
    .tox .tox-menu .tox-collection__item-label {
        overflow-wrap: break-word;
        word-break: normal;
    }
}

scaling the viewport to < 768px or deactivating

           overflow-wrap: break-word;

shows at least the <h1> tag as i would expect it to.

 

 

[Stefanowitsch]

18 hours ago, herr rilke said:

hello and thank you both for your ideas,

the easiest first: browsers are not scaled.

what i can see in the devtools is that for the h1 tag in the editor

<div class="tox-collection__item-label">
  <h1 style="font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; font-size: 32px; font-weight: bold; font-style: normal; text-decoration: none solid rgb(34, 34, 34); text-transform: none; color: rgb(34, 34, 34); background-color: rgba(0, 0, 0, 0); padding: 0px 2px; border: 0px none rgb(34, 34, 34); border-radius: 0px; outline: rgb(34, 34, 34) none 0px; text-shadow: none;">
    Überschrift 1
  </h1>
</div>

this css makes a difference:

skin.min.css:1

@media only screen and (min-width: 768px) {
    .tox .tox-menu .tox-collection__item-label {
        overflow-wrap: break-word;
        word-break: normal;
    }
}

scaling the viewport to < 768px or deactivating

           overflow-wrap: break-word;

shows at least the <h1> tag as i would expect it to.

 

 

One of the downgrades of front-end editing is indeed the fact that you have to put in some work for making the editor and its appearance not being affected by third party styes. 

For example I have these overrides in all my projects:

.alfred {
  overflow: visible;
}

.tox.tox-tinymce-inline {
  z-index: 100;
}

This is because the editor toolbar in the frontend sometimes gets overlayed by other elements in the DOM hat have - design wise - a higher z-index for example. 

[bernhard]

I'm not sure if we are talking about frontend editing here?

For me the issue with the TinyMCE toolbar being wrapped is also on the backend, but only if I have the browser zoomed to > 100%

[herr rilke]

thank you @Stefanowitsch - i pasted that styles in my  _main.php but unfortunatly makes no differences.

i'm using in the above example the CTA block from @bernhard example block.

makes no difference if i call that from the page edit in backend or frontend editing in RPB.