change width of editor pane overlay - Stacked Content Feedback

Robbie van den Hoven 36 posts 181 karma points

Mar 26, 2018 @ 14:20

Change width of editor pane / overlay

Hi,

Is there a valid way of making the editor pane (umb-overlay) wider/larger? Would be nice if it has a wider size, but less the size of the doctype/pane with the Stacked Content picker on it.

I just want to 'override' the size of the pane of an Stacked Content editor, not all the overlays

Copy Link

Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib

Mar 26, 2018 @ 14:35

Hi Robbie,

You could try using a custom CSS rule?

.inner-content-overlay .umb-overlay-right {
    width: 800px !important;
}

If you want to know about how to add this in the back-office, take a look at an article that Matt Brailsford wrote for 24days: https://24days.in/umbraco-cms/2015/umbraco-7-back-office-tweaks/

I'd love the Stacked Content overlay width to be configurable, but requires some time & research to figure it out, (aka it's on my ever growing to-do list) ;-)

Cheers,
- Lee

Copy Link

Robbie van den Hoven 36 posts 181 karma points

Mar 26, 2018 @ 14:59

Hi,

A configurable width would be nice :-)

for know I used:

.stacked-content .umb-overlay-right { width: 800px; }

Copy Link

Chris Evans 137 posts 353 karma points c-trib

Feb 20, 2019 @ 03:34

I second the configurable width idea - that would be amazing.

Is there a github feature request / issue for this already, or a roadmap of upcoming features we could look at to see when interesting updates of this kind may be released?

Copy Link

Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib

Feb 20, 2019 @ 11:57

We don't have any plans to add a configurable width option to the data-type itself, we did add a feature to v2.0.3 which adds extra CSS classes to the overlay modal.

See here for further details: https://github.com/umco/umbraco-stacked-content/issues/61

This means that you'd still need to add your own custom CSS rules, but it gives you control over having varying widths for different doctype/property aliases.

Hope this helps?

Cheers,
- Lee

Copy Link

Chris Evans 137 posts 353 karma points c-trib

Feb 20, 2019 @ 21:33

Thanks Lee - this is actually very useful, appreciate it!

Copy Link

M N 125 posts 212 karma points

Nov 15, 2019 @ 21:40

Just switched over from Doc Type Grid editor to Stacked Content and thought I would share a complete example of our SCSS.. Kind of quick and dirty, didn't bother with any variables.

Show buttons when you hover anywhere over a stacked item, not just the button hot zones
Matched the purple buttons more closely to the add/paste buttons.
Some padding/margin so we could separate the blocks more clearly.
Bottom most buttons are visible all the time, and are a bit larger than the buttons inside actual stacked items
Flyout Panel 800px - thanks :) good addition
We're using umbracoNaviHide here, so we can disable stacked items. Styles are in there, but you will need to modify your Preview version of CSHTML to have something like

< div class="@(!Model.IsVisible() ? "stack-disabled" : "" )">
```
@Html.Raw(html)
```
< /div> (sorry editor is failing hard)

Our updated Stacked Content UI now looks like this (you can hover anywhere on the panel to get the buttons) -

enter image description here

And the SCSS

.stacked-content {
    .umb-overlay-right {
        width: 800px;
    }
    // holds all individual stacked items
    .stack__wrapper {
        // contains all stacked items, buttons for add, delete, copy, etc.
        .stack {
            // alternate stacked item backgrounds. meh
            .stack__item:nth-child(even) {
                background: #fff
            }

            .stack__item:nth-child(odd) {
                background: #FFF
            }
            // individual stacked items!
            .stack__item {
                margin-top: 25px;
                padding: 20px;
                transition: all .2s cubic-bezier(0.39, 0.575, 0.565, 1);

                &:hover {
                    box-shadow: 0 0 5px #ccc;
                }
                // add / paste buttons
                .stack__add-bar {
                    margin: 0;
                    height: 0;
                    position: relative;
                    top: -35px;

                    &.stack__add-bar--top {
                    }



                    .stack__add-button, .stack__paste-button {
                        transition: all .2s cubic-bezier(0.39, 0.575, 0.565, 1) !important;
                    }
                }
                // preview and copy/delete buttons
                .stack__preview-wrapper {
                    border: 1px solid #f8f8f8;
                    // preview holder
                    .stack__preview {
                        background: #fdfdfd;
                        min-height: 50px;
                        padding: 20px;

                        .stack-disabled {
                            position: relative;


                            &:before {
                                content: "Disabled";
                                position: absolute;
                                top: -20px;
                                left: -20px;
                                color: white;
                                padding: 4px 10px;
                                background-color: #aa0000;
                                border-radius: 2px;
                                font-weight: bold;
                                text-transform: uppercase;
                                opacity: 1 !important;
                            }

                            * {
                                opacity: .7;
                            }
                        }
                    }
                    // button holder
                    .stack__buttons {
                        //opacity: 1 !important;
                        position: absolute;
                        right: -34px;
                        top: -7px;
                        background: transparent;
                        color: white;
                        bottom: 0;
                        height: 0;
                        transition: all .2s cubic-bezier(0.39, 0.575, 0.565, 1);

                        &:after {
                            display: none;
                            opacity: 0;
                        }

                        .no-overflow {
                            .stack__button {
                                display: block;
                                margin-bottom: 3px;
                            }
                        }
                    }
                }
                // Show buttons on panel hover
                &:hover {
                    .stack__add-button, .stack__paste-button {
                        opacity: 1 !important;
                    }

                    .stack__buttons {
                        opacity: 1 !important;
                    }
                }
            }
        }
        // add / paste buttons at the bottom that are not attached to a
        .stack__add-bar.stack__add-bar--bottom {
            margin: 0;
            padding: 50px;
            margin-bottom: 20px;
            background: #fdfdfd;
            height: auto;
            margin-top: 15px;

            .stack__add-button {
                opacity: 1 !important;
                margin-right: 5px;
            }

            .stack__paste-button {
                opacity: 1 !important;
            }

            .stack__add-button, .stack__paste-button {
                padding: 7px 7px;
            }
        }
    }
}

Minified CSS

.umb-nested-content__item .umb-nested-content__content .umb-nested-content__item .umb-nested-content__content{background:#f3f3f3}.stacked-content-label{color:#000;font-weight:700;font-size:16px;position:relative;width:355px;top:29px;padding-bottom:20px}.stacked-content .umb-overlay-right{width:800px}.stacked-content .stack__wrapper .stack .stack__item:nth-child(2n),.stacked-content .stack__wrapper .stack .stack__item:nth-child(odd){background:#fff}.stacked-content .stack__wrapper .stack .stack__item{margin-top:25px;padding:20px;transition:all .2s cubic-bezier(.39,.575,.565,1)}.stacked-content .stack__wrapper .stack .stack__item:hover{box-shadow:0 0 5px #ccc}.stacked-content .stack__wrapper .stack .stack__item .stack__add-bar{margin:0;height:0;position:relative;top:-35px}.stacked-content .stack__wrapper .stack .stack__item .stack__add-bar .stack__add-button,.stacked-content .stack__wrapper .stack .stack__item .stack__add-bar .stack__paste-button{transition:all .2s cubic-bezier(.39,.575,.565,1)!important}.stacked-content .stack__wrapper .stack .stack__item .stack__preview-wrapper{border:1px solid #f8f8f8}.stacked-content .stack__wrapper .stack .stack__item .stack__preview-wrapper .stack__preview{background:#fdfdfd;min-height:50px;padding:20px}.stacked-content .stack__wrapper .stack .stack__item .stack__preview-wrapper .stack__preview .stack-disabled{position:relative}.stacked-content .stack__wrapper .stack .stack__item .stack__preview-wrapper .stack__preview .stack-disabled:before{content:"Disabled";position:absolute;top:-20px;left:-20px;color:#fff;padding:4px 10px;background-color:#a00;border-radius:2px;font-weight:700;text-transform:uppercase;opacity:1!important}.stacked-content .stack__wrapper .stack .stack__item .stack__preview-wrapper .stack__preview .stack-disabled *{opacity:.7}.stacked-content .stack__wrapper .stack .stack__item .stack__preview-wrapper .stack__buttons{position:absolute;right:-34px;top:-7px;background:transparent;color:#fff;bottom:0;height:0;transition:all .2s cubic-bezier(.39,.575,.565,1)}.stacked-content .stack__wrapper .stack .stack__item .stack__preview-wrapper .stack__buttons:after{display:none;opacity:0}.stacked-content .stack__wrapper .stack .stack__item .stack__preview-wrapper .stack__buttons .no-overflow .stack__button{display:block;margin-bottom:3px}.stacked-content .stack__wrapper .stack .stack__item:hover .stack__add-button,.stacked-content .stack__wrapper .stack .stack__item:hover .stack__buttons,.stacked-content .stack__wrapper .stack .stack__item:hover .stack__paste-button{opacity:1!important}.stacked-content .stack__wrapper .stack__add-bar.stack__add-bar--bottom{margin:0;padding:50px;margin-bottom:20px;background:#fdfdfd;height:auto;margin-top:15px}.stacked-content .stack__wrapper .stack__add-bar.stack__add-bar--bottom .stack__add-button{opacity:1!important;margin-right:5px}.stacked-content .stack__wrapper .stack__add-bar.stack__add-bar--bottom .stack__paste-button{opacity:1!important}.stacked-content .stack__wrapper .stack__add-bar.stack__add-bar--bottom .stack__add-button,.stacked-content .stack__wrapper .stack__add-bar.stack__add-bar--bottom .stack__paste-button{padding:7px}

/App_Plugins/StackedContent/package.manifest

{
  "javascript": [
    "~/App_Plugins/StackedContent/js/stackedcontent.js"
  ],
  "css": [
    "~/App_Plugins/StackedContent/css/stackedcontent.css",
    "~/path-to-new-css/main.css"
  ]
}

Hope that helps anyone coming in cold :) Cheers

Copy Link

is working on a reply...

Flag this post as spam?

Change width of editor pane / overlay