responsive modal editor

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Uchenna 9 posts 79 karma points

May 30, 2018 @ 15:50
0

Responsive Modal Editor
When editing, some editor types take up more screen space and thus needs to be responsive. As a result the Related Links editor type is not fully shown in the modal dialog and I'm sure this is true for other editor types (I haven't checked them all)

I used inspect element and found that if I inject the CSS
```
overflow-x: scroll;
```
Then it allows me to scroll and view the hidden parts. I was wondering if this is something that is being worked on, and personally I'd like for the package to include this change in it's core, I don't want to have to edit it per project. I don't mind creating a pull request for this change, once I get confirmation from the devs.

I have included an image of what I am talking about below
Copy Link
Steve Morgan 1349 posts 4459 karma points c-trib

Jun 29, 2018 @ 10:26
1
Just had this exact issue. Seems the previous dev had hacked in some custom styles that were borked when I upgraded the DGTE package.

I created a custom Tweaks css in App_Plugins as per https://24days.in/umbraco-cms/2015/umbraco-7-back-office-tweaks/

This did the trick.. it looks hacky as hell but there wasn't an obvious, clean, class name in the editor to limit this to only DTGE overlays (this might be a nice tweak to future releases :) ). It also makes the overflow scrollable so related links etc that breakout are still useable on mobile / tablet (I hope!).
```
.umb-cell-\/App_Plugins\/DocTypeGridEditor\/Views\/doctypegrideditor\.html .umb-overlay-right {
    width: 500px !important;
}

@media (min-width: 1500px) {
    .umb-cell-\/App_Plugins\/DocTypeGridEditor\/Views\/doctypegrideditor\.html .umb-overlay-right {
        width: 70% !important;
    }
}

.umb-cell-\/App_Plugins\/DocTypeGridEditor\/Views\/doctypegrideditor\.html .umb-overlay.umb-overlay-right .umb-overlay-container {
    overflow: scroll;
}
```
Hopefully helpful to someone.

Steve
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?