Document Manager file options menu disappears when zooming out

[Atul]

Hi, I am facing an issue where the Document Manager pop-up window that appears when attaching documents disappears from the right-hand file settings menu when zooming out of the page in any browser.

The issue is also reproducible here: Official RadEditor By Telerik

Please see the recording for more information:- https://jam.dev/c/de662891-5a44-4419-8738-616672fbb7f8

  Before:-

 


After:-

[Rumen]

Hi Atul,

Thank you for reporting this behavior.

The Document Manager dialog layout can be affected when the browser zoom level is reduced. In this case, the file tree panel expands and pushes the preview/settings panel out of view. Since browser zoom changes the available rendering space, this scenario is not fully supported by the default dialog layout.

As a workaround, you can apply a small CSS override that limits the file tree panel width only when the dialog becomes narrow (such as during browser zoom). This keeps the preview panel visible while preserving the normal layout at standard zoom levels.

You can add the override via the DialogsCssFile property like this:

<telerik:RadEditor runat="server" ID="RadEditor2" Height="600px" DialogsCssFile="DialogCssFile.css" Skin="Metro">
    <DocumentManager ViewPaths="~/Docs" />
</telerik:RadEditor>

DialogCssFile.css

/* Apply only when the dialog gets small (like when user zooms out) */
@media (max-width: 1200px) {
    .redWrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

        /* Left file tree pane: limit growth, allow shrink but not collapse */
        .redWrapper .redFEWrapper {
            flex: 0 1 auto !important;
            max-width: 380px !important;
            min-width: 240px !important;
            overflow: hidden !important;
        }

        /* Right settings/preview pane */
        .redWrapper .redFBDialogContentContainer {
            flex: 1 1 auto !important;
            min-width: 280px !important;
        }
}

This ensures the dialog maintains its expected look during standard usage, and prevents the preview pane from disappearing when zoomed out.
Do not forget to clean the browser cache when testing the solution.

Regards,
Rumen
Progress Telerik

[Atul]

Hi Rumen,

Thank you for responding. Your solution worked perfectly for the file manager. However, there is the same issue for the Image Manager. Could you also please assist with this?

[Rumen]

Hi Atul,

I tested the solution, and it works for both the Image Manager and Document Manager dialogs. For your convenience, I recorded and attached a video that demonstrates how to troubleshoot this scenario using the DevTools inspector to identify what is causing the issue on your end.

Please make sure that the DialogsCssFile.css file is properly imported and that the browser cache is cleared. You may also need to adjust the CSS in the DialogsCssFile.css file to match your exact setup and scenario.

Best regards,
Rumen

[Atul]

Hi Rumen,

Thank you. You are a life saver. Thank you so much!