Jump to content

RockPageBuilder: strange WYSIWYG editor behavior


Recommended Posts

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:

Clipboard1.jpg.48b2e94a6fe64b897ef9195269a798d0.jpg

 

1390144064_Clipboard2.jpg.b723e9a482098b8702b5750765ccd606.jpg

 

in firefox i get in a select the following problem:

1624615725_Clipboard3.thumb.jpg.8dbe624355e540127fde697f6f366704.jpg

 

any hints for that?

 

Link to comment
Share on other sites

15 hours ago, herr rilke said:

in firefox i get in a select the following problem:

1624615725_Clipboard3.thumb.jpg.8dbe624355e540127fde697f6f366704.jpg

 

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.)

image.thumb.png.23193c2857aa5d519d5f101a9c12cfde.png

 

 

  • Like 1
Link to comment
Share on other sites

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.

 

 

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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%

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...