MarkE Posted March 18, 2024 Share Posted March 18, 2024 Is there any way to adjust the position of the TinyMCE toolbar when using the front end editor? As you can see from the picture, it overlays the text I'm trying to edit. 1 Link to comment Share on other sites More sharing options...
bernhard Posted March 18, 2024 Share Posted March 18, 2024 I've experienced similar problems and didn't have time to investigate, so I'm also interested in a solution! Thx for bringing that up! ? Link to comment Share on other sites More sharing options...
MarkE Posted March 19, 2024 Author Share Posted March 19, 2024 15 hours ago, bernhard said: I've experienced similar problems It seems to only be a problem with TinyMCE. The CKEditor toolbar is positioned correctly. I'm looking into a js fix for now... Link to comment Share on other sites More sharing options...
MarkE Posted March 20, 2024 Author Share Posted March 20, 2024 Hi @bernhard. It's really weird. If I move a window from one screen to another, the problem fixes itself. Move it back to the original screen and it reappears. What is happening is that the 'bold' dropdown you can see in the image I posted appears between the menu and icon lines, causing the bottom of the toolbar to drop down. When I move the window to a different screen the 'bold' dropdown is displayed inline with the icons. This is with no interaction other than simply dragging the window, so it looks like maybe a css issue? Still looking.... Link to comment Share on other sites More sharing options...
bernhard Posted March 20, 2024 Share Posted March 20, 2024 Interesting, I think it might have also been the bold icon when I saw that behaviour, but I can't reproduce at the moment. Link to comment Share on other sites More sharing options...
MarkE Posted March 20, 2024 Author Share Posted March 20, 2024 Sorry to say @bernhard, that I seem to have run out of road on this one. I compared two identical windows, one showing it correctly and the other not. The css was identical and there were no media queries. I compared the html and there are very minor differences in some of the width settings, which you can see being changed by js as the window is dragged between screens. The main one was this div: <div role="application" class="tox tox-tinymce tox-tinymce-inline tox-tinymce--toolbar-sticky-off" aria-disabled="false" style="visibility: hidden; display: flex; position: absolute; left: 10px; top: 826px; width: 591px;"> which is the html on the 'correct' rendering and this: <div role="application" class="tox tox-tinymce tox-tinymce-inline tox-tinymce--toolbar-sticky-off" aria-disabled="false" style="visibility: hidden; display: flex; position: absolute; left: 11px; top: 830px; width: 591px;"> which is the rendering with the drop-down above the icon line (which is what causes the problem). All the other width changes appeared to be fractions of a decimal and there were no other html differences. I manually changed the 'bad' html to be the same as the'good' html using developer tools, but there was no noticeable effect. So I am pretty much stumped. Maybe @ryan, who must have a deeper understanding of what the js is doing (much of it is minimised) could shed some light? Link to comment Share on other sites More sharing options...
MarkE Posted March 20, 2024 Author Share Posted March 20, 2024 One solution is simply to add {"toolbar_location": "bottom"} to the JSON default overrides in the module config, but I don't really like it. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now