Shrink Modal Height

rpmccormick

I need the Editor modal to allow more room on top and bottom, as I have my own overlays there and they can cover the title and bottom buttons.

I have found adjusting the height of DTE_Body_Content is the perfect thing.
By default it has a max-height value that changes as you resize your browser height.

How do I make it subtract 60 pixels from its calculation as the page resizes?
(or if not possible, how to I detect the page resized so I can overwrite the new value)

colin

If you're using BS4 - this thread should help.

Also this one here.

Hope that helps,

Colin

rpmccormick

Thanks for the attempt. I had already found that second link on my own and tried the 70% thing but it did not work out. I am not using any skin on datatables (my pages use BS4, but I hate the look of DataTables with the BS skin... your default look is awesome, only foundation comes close)

It is the auto-changing of your DTE_Body_Content css class's max-height. Any other ideas where I can look to figure out how to edit that? Do you have a media query in the datatables.css file I can adjust? (I admit I have not looked in to editing your css file myself yet, and am using the minified all-in-one version, so the whole task seems daunting without some instruction of what to look for). Thanks.

Alternatively, I could set my own when the screen is resized, and also set it when any DT model is first opened. Could you point me in the right direction for one of your events that will fire just after ANY model window is opened? Thanks again.

rpmccormick

Here is a screen shot of the issue

Another issue in the screenshot I am having all of a sudden is that the header is blank and the footer has no buttons. Ug.

rpmccormick

Ok, new idea, I just need to set the z-order higher then my stuff, so the whole interface is shaded over with your modal instead of my AdminLTE frame overlapping it.

<style>
 .DTED_Lightbox_Background {z-index:  10000!important;}
 .DTED_Lightbox_Wrapper    {z-index:  10001!important;}
</style>

That will do, thanks.
(it would be cooler to center the modal over the page only leaving the framework on top, but it is not worth the effort)

colin

I see you've found something that works - but another option would be to use multi-columns, like this: https://editor.datatables.net/examples/styling/columns.html

Colin