Content area horizontal placed blocks in edit mode

Member since: 2008

How do you set the content area if the content should edited in vertical or horizontal mode?

On the Alloy template site on the standard page there is a teaser / promo content area that in edit mode is shown as horizontal blocks. Using firebug I can see that EPi has added the class dojoDndHorizontal to do this.

But I cannot figure out how Alloy triggers this dojoDndHorizontal to be added.

The site I have is not built on bootstrap as Alloy is, instead we use Foundation.

Thanks

#80773 Jan 31, 2014 14:14
  • Member since: 2002

    Hi!

    Alloy never triggers anything regarding how the content should be edited. The UI, that is a layer on top of the site, will query the nodes inside the content area to try and determine if the underlying layout is vertical or horizontal. Of course, there might be scenarios that we dont handle here. I'll post the actual code that is used to determine this so perhaps you can see if you have a case that we don't handle:

     

    if(/vertical|horizontal/.test(this.layout)) {
    horizontal = this.layout === "horizontal";
    } else {
    horizontal = array.some(this._getBlockNodes(), function(node) {
    var style = domStyle.getComputedStyle(node),
    floating = /left|right/.test(style.cssFloat),
    inline = /inline|inline-block/.test(style.display);

    return floating || inline;
    });
    }

    #80778 Jan 31, 2014 16:11
  • Member since: 2010

    I am having this same problem and cannot figure out how to make this work.

    The content area overlay is rendered with the correct position, width and height. However, the individual block overlays are rendered at the top of the content block, with a full width and minimum height. The problem is the same as shown in the screenshot in the comments at the bottom of this blog post: http://tedgustaf.com/blog/2013/11/edit-mode-specific-styling-in-episerver-7/

    The page template currently has the following code to render and edit the content area:

    <div class="container">
                <div class="wrapper-100" @Html.EditAttributes(m => m.CurrentPage.FeatureBlocks)>
                    @Html.DisplayFor(m => m.CurrentPage.FeatureBlocks)
                </div>
            </div>

    Note that I am using a combination of 'EditAttributes' and 'DisplayFor' because when using 'PropertyFor', the problem is the same, but even worse because the edit overlay does not wrap over the entire height of the content area. 

    Within the content area there are 2 blocks with the following markup:

    <article class="page-feature">
        <!-- Some content here -->
    </article>

    The article elements have a left float, so if the code posted above is true, then I would have thought this would work already? They are also 50% width, and I have tried changing their widths to fixed pixels to see it would make a difference, but it didn't. No matter what CSS I change, they block overlays always have a CSS class of 'epi-injected-minSize'.

    If anybody could give any further insight into how to make this work it would be most appreciated.

    Thanks,

    Simon

    #87948 Edited, Jun 26, 2014 10:20
  • Member since: 2010

    I have now managed to fix this, it seems to be a combination of 2 problems. I'll detail this here in case somebody has the same issue:

    1.

    The overlay height issue can be fixed by adding a custom CSS class as described here: http://tedgustaf.com/blog/2013/11/edit-mode-specific-styling-in-episerver-7/

    However, the ViewDataName for adding the CSS class has changed to simply 'CssClass'. So the template code to render the content area is now:

    @Html.PropertyFor(m => m.CurrentPage.FeatureBlocks, new { CssClass = "video-feature-content-block-edit-area" })

    A special CSS file containg these classes is added to layout when in edit mode:

    @if (PageEditing.PageIsInEditMode)
        {
            <link rel="stylesheet" href="/assets/css/onpageedit.css">
        }

    In the CSS file the content area overlay and the individual block overlays need their overflow set to hidden:

    .video-feature-content-block-edit-area {
        overflow: hidden;
    }
    
    .video-feature-content-block-edit-area div.epi-injected-minSize {
        overflow: hidden;
    }

    2. As the article elements have percentage widths of 50%, they only take up 50% of the div overlay added around the block. Therefore, the widths need to swap, with the div overlay set to 50% instead and the article set to 100%. Additionally, the overlay block div needs floating left. The complete CSS looks like the following (note that the 50% article width was only ever needed for screen width's >= 768px):

    .video-feature-content-block-edit-area {
        overflow: hidden;
    }
    
    .video-feature-content-block-edit-area div.epi-injected-minSize {
        overflow: hidden;
        float: left;
    }
    
    @media only screen and (min-width: 768px) {
        .video-feature-content-block-edit-area div.epi-injected-minSize {
            width: 50%;
        }
    }
    
    .video-feature-content-block-edit-area div.epi-injected-minSize article.page-feature {
        width: 100%;
    }

    It does seem odd that the UI can't seem to handle percentage widths for the block elements, hopefully this is something that EPiServer can improve in the future so that custom tweaking is not required.

    #87960 Jun 26, 2014 12:44
  • Member since: 2011

    Did someone ever fix this properly? Preferably with some form of manual override or the like. I'm using display: flex, which seems to end up being vertical. Which just doesn't fit at all.

    If there is no such override, there should be one, instead of assuming the CMS knows best every time. Stuff changes quickly on this The Internet.

    #145180 Feb 26, 2016 14:32
  • +1 We're using display flex grids too and Episerver guess about layout is wrong. Would be nice to have a way to configure it.

    #146772 Mar 23, 2016 13:42
  • +1

    Bootstrap 4 uses flex box, so we really need this!

    #175917 Mar 06, 2017 14:30
  • I'm just going to leave this here : https://brianweet.github.io/2017/03/07/forcing-editor-overlay-layout-mode.html

    Let me know if it works, we're not using flexbox as far as I know but at least you should be able to force the direction.

    #176020 Edited, Mar 07, 2017 19:07
This topic is locked because the last reply was posted more than 6 months ago. Please contact epw@episerver.com to unlock it.