[Bug]: The fullscreen mode is not working properly

[tok3]

What happened?

When the editor is opened in fullscreen mode (in my case opened from a builder block), the toolbar is always covered by the left navigation of Filament3. Unfortunately, no way has been found to increase the z-index accordingly. All hints regarding the same issue in connection with Twitter Bootstrap have been tried without success.

How to reproduce the bug

Open editor in fullscreen mode

Package Version

2.3.1

PHP Version

8.2.7

Laravel Version

10

Which operating systems does with happen with?

macOS

Notes

No response

[mohamedsabil83]

It seems you made a custom theme, including Bootstrap, if I understand you will. But I checked on my side inside/outside the builder, and fullscreen works as expected. Can you provide extra details, e.g., use it within the panel or forms only? Also, a screenshot will be helpful.

[tok3]

Hello Mohamed, thank you for the quick response.

I'm using it in filament panels in builder block. The content_css I load in the TinyMCE config is Bootstrap. I don't use Bootstrap in Filament itself; it's all Tailwind as it comes with Filament. As you can see in the second screenshot, the left navigation is over the TinyMCE content, and thus over the button controls, meaning that all buttons lying under the navigation cannot be pressed. In this example, from fullscreen to link. Sometimes, as in the last screenshot, the menu does not appear at all in fullscreen mode, then it seems to lie under the top bar. Do you have any idea what might be causing this, or any suggestions?

Am 21. März 2024, 19:57 +0100 schrieb Mohamed Sabil @.***>:

It seems you made a custom theme, including Bootstrap, if I understand you will. But I checked on my side inside/outside the builder, and fullscreen works as expected. Can you provide extra details, e.g., use it within the panel or forms only? Also, a screenshot will be helpful. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

[mohamedsabil83]

Hello, @tok3.

Unfortunately, the screenshots are not attached. But from what you mentioned, It looks like the loaded Bootstrap overrides something in the editor itself, not the plugin. Could you check the TinyMce 5 docs? You may find some configurations to load content_css without any unexpected side effects.

[tok3]

The screenshots :-)

[mohamedsabil83]

Could you stop loading content_css and check if fullscreen works as expected? From the attached screenshots, it's clear that you don't use a custom theme for the panel. So, if it works after stopping loading content_css, then you can focus on that part.

[tok3]

Unfortunately the same behavior

[mohamedsabil83]

That's weird. I tried again on my side, and it works as expected. Run the command php artisan filament:upgrade and ensure your dependencies are updated and you didn't publish/override something that made this happen.

[tok3]

I've run php artisan filament:upgrade, and it's all the same, really weird, especially since that's out of the box with Filament 3! If I find a solution, I will post it. Am 22. März 2024, 13:16 +0100 schrieb Mohamed Sabil @.***>:

That's weird. I tried again on my side, and it works as expected. Run the command php artisan filament:upgrade and ensure your dependencies are updated and you didn't publish/override something that made this happen. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[mohamedsabil83]

OK. I'll close it for now, but please don't hesitate to re-open it if you find anything new.