Editor Modal exceeds browser window, can't click update button

Stacey1134

This is a quick question I cannot find in the manuals or forum. I can add code if necessary (I have to do a lot of redacting first) , but I think it's just something I'm overlooking.

The editor works fine on the dataTable. But the bottom of the modal exceeds the boundaries of the browser window. At present, I have to reduce my chrome zoom to 75%. Scrollbars work, just not that far. What am I missing? This is when I create a custom form with "template".

Stacey1134

Oops The same issue with editor regular or custom using template

colin

When you say you reduced your Chrome zoom, is there always a zoom in place? I'm asking as I believe that the browser zoom does cause issues with the styling,

Colin

allan

It does - and unfortunately that isn't something we can fix since the CSS / JS has no concept of the browser's zoom. I'm afraid that we can't offer any support for zoom related issue.

However, the modal exceeding the browser window we might be able to help with. What styling framework are you using? The DataTables / Editor default won't do that.

Some of the other styling integrations might though.

Allan

Stacey1134

So I did tons of more research and testing yesterday and the change in editor.dataTables.css seems to work for now. However, sometimes I get 3 scrollbars.

div.DTED_Lightbox_Wrapper { position: fixed; top: 0; left: 5%; margin-left: 0; width: 90%; height: 100%; z-index: 11; overflow: auto; }

I am also now using a custom form so I can move fields around because it will scroll down a limited amount. I'm not having this problem with normal bootstrap modals, only editor. And since, this is essentially a plug-in, I'm not sure what else to change/override.

Also, I was only using zoom so the editor modal could fit, i.e., could access the update button. There is normally no zoom in place.

Stacey1134

Also, I was only using zoom so the editor modal could fit, i.e., could access the update button. Normally the browser is not in zoom mode.

allan

The div.DTED_Lightbox_Wrapper element would be used on Editor's default modal. But then you mention that you have Bootstrap modals on the page as well?

It sounds like you might be missing the Bootstrap integration for Editor? As shown in this example, if you have Bootstrap on the page, and you load the Bootstrap integration for Editor, it will use the Bootstrap modals (so the UI is more consistent).

Allan

Stacey1134

Interesting. I do use bootstrap modals as well.
* First, I noticed that the X doesn't actually close the editor modal when using editor.bootstrap5.js.
* Second, Should I make all bootstrap div's work in that script file, or did you design it so it can be read from somewhere else, or should I just do CSS overrides? I typically use a lot of formatting in my modals.

kthorngren

Datatables and Editor have style integration files for many style frameworks. See the Datatables styling and Editor styling docs for details. Use the Download Builder to get the proper files for the version of Bootstrap you are using.

Kevin

Stacey1134

Yeah, that's duplicitous. Okay! Thanks @kthorngren . Download Builder doesn't work correctly, or give me what I need to integrate at least. The suggestion was to use Bootstrap instead of the native editor. But I'll figure it out somehow.

Stacey1134

BTW, I fixed the original question so you can close it.

kthorngren

Download Builder doesn't work correctly, or give me what I need to integrate at least. The suggestion was to use Bootstrap instead of the native editor.

With Editor you have to download the libraries. Go to the Download tab. In the download file you will see an Editor folder with all the CSS and JS files. Open the appropriate styling example and take a look at the Javascript and CSS tabs to see the appropriate files to use.

If you still have issues please provide details of the problem.

Kevin

Stacey1134

ok, I'm going to save my config file, and drop the whole Editor-PHP-2.0.10 directory, and try to install a fresh copy and see if that works, because right now when I use the bootstrap 5 plug in, editor is all screwed up and the I can't even close the modal by pressing 'X'

Stacey1134

Argh!!!. Is there any thread that speaks to bootstrap 5? I've been through about every thread here and the hacks don't work. Without editor, I use modal-lg or modal-xl in my bootstrap modals. I cannot find a place to do it here that doesn't crash the darn editor. And NO the style examples DO NOT give ANY examples of something so simple, at least none in my download files or anything I can find here. At least the modal is showing and closing appropriately.

Stacey1134

Yay! So I still searched everything with no help, and sorry @kthorngren , the styles examples do not show how to fix this. Plus lightbox is not in editor.bootstrap5.css, and rightly so.

I switched from editor.bootstrap5.min.js to editor.bootstrap5.js and made the following changes:

/*
 * Bootstrap display controller - this is effectively a proxy to the Bootstrap
 * modal control.
 */
let shown = false;
let fullyShown = false;

const dom = {
    content: $(
        '<div class="modal fade DTED">'+
//          '<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered"></div>'+
            '<div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered"></div>'+
        '</div>'
    ),
    close: $('<button class="btn-close"></div>')
};

And it correctly sized my modal. I am still using template and CSS to do the color changes, for now, hopefully I can figure it out here as well. But I now have a working editor, sized correctly, using bootstrap 5, thanks @allan it definitely makes a difference. Now off to including select2, joins and/or nested editors.

TTFN!

allan

Now off to including select2, joins and/or nested editors.

Hah - a sucker for punishment!

If you want to use a custom class on the Bootstrap modal that Editor creates, without modifying the library code, you can use the displayNode() to get the modal wrapper - e.g.:

$('div.modal-dialog', editor.displayNode()).addClass('modal-xl');

Allan